手把手教你用js插入HTML元素

更新時間：2024年06月14日 10:00:07 作者：IKUNzhenin

JavaScript提供了豐富的屬性操作方法,用于操作各種HTML元素,下面這篇文章主要給大家介紹了關于用js插入HTML元素的相關資料,文章通過代碼介紹的非常詳細,需要的朋友可以參考下

這段代碼是一個有序列表（ordered list），使用<ol>標簽包裹起來。有序列表中的每一項由<li>標簽表示。

在這個例子中，有三個列表項：

目錄 1

目錄 2

目錄 3

這段代碼會渲染成一個有序列表，顯示為：

目錄 1

目錄 2

目錄 3

<ol>
<li>目錄 1</li>
<li>目錄 2</li>
<li>目錄 3</li>

</ol>
<button id="btn1">添加目錄</button>

<script type="text/javascript">
	let btn1=document.getElementById('btn1');
	console.log(btn1);
	let ol =document.getElementsByTagName('ol')[0];
	let li=document.getElementsByTagName('li');
	console.log(li);
	btn1.onclick=function(){
		ol.innerHTML+=`<li>追加目錄4</li>`
	}
</script>

這段代碼是一個JavaScript代碼塊，使用`<script>`標簽包裹起來，并設置了`type="text/javascript"`。

這段代碼執(zhí)行了以下操作：

1. 使用`document.getElementById('btn1')`獲取了一個id為"btn1"的元素，并將其賦值給`btn1`變量。

2. 使用`console.log(btn1)`將`btn1`變量輸出到控制臺，用于驗證獲取到的元素是否正確。

3. 使用`document.getElementsByTagName('ol')[0]`獲取了所有的`<ol>`元素，并取得第一個元素賦值給`ol`變量。

4. 使用`document.getElementsByTagName('li')`獲取了所有的`<li>`元素，并將其賦值給`li`變量。

5. 使用`console.log(li)`將`li`變量輸出到控制臺，用于驗證獲取到的元素是否正確。

6. 為`btn1.onclick`事件添加了一個函數(shù)。當點擊`btn1`時，執(zhí)行以下操作：
- 使用`ol.innerHTML+=`追加了一個包含文本"追加目錄4"的`<li>`元素到`ol`元素中。

這段代碼的作用是，當點擊id為"btn1"的按鈕時，在現(xiàn)有的有序列表中追加一個新的列表項，內容為"追加目錄4"。

附：js 將html插入指定元素中

一定要先定義一個空的html。。。

一定要記得寫#啊，#代表id,.代表class..

定義一個空html，一定要寫在for循環(huán)外面，否則每次循環(huán)，html_same又被清空了..

    <!-- 同類商品推薦 -->
    <script type="text/javascript">
    $(function(){
        var my_role = $('#my_role').val();//一定要記得寫#啊，#代表id,.代表class..
        var data = {'role': my_role};
        $.post(contextPath+'/SameProductController',data,'json').done(function(datas){
            datas = JSON.parse(datas);
            var html_same ='';  //一定要寫在for循環(huán)外面，否則每次循環(huán)，html_same又被清空了..
            for(var i=0;i<datas.length;i++){
                var product = datas[i];
                var pic = 'img/'+product.product_img;
                html_same +='<div>'
                            + '<ul>'
                            + '<li class="sel_detlmli">'
                            + '<p class="sel_detlmlimg"><a href="#" rel="external nofollow"  rel="external nofollow" >'
                            + '<img src='+pic+' width="160" height="160" /></a></p>'
                            + '<p class="sel_detlmlip"><a href="#" rel="external nofollow"  rel="external nofollow" >名稱：'+product.product_name+'</a></p>'
                            + '<p class="sel_detlmlip">規(guī)格：'+product.product_standard+'</p>'
                            + '<p class="sel_detlmlip">產品類型：'+product.product_type+'</p>'
                            + '<p class="sel_detlmlip">廠家：'+product.product_producer+'</p>'
                            + '</li>'
                            + '</ul>'
                            + '<div>'
            }
            $('#theSame').html(html_same);
        }).fail(function(res){

        });
    });
    </script>

總結

到此這篇關于用js插入HTML元素的文章就介紹到這了,更多相關js插入HTML元素內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: