總結 function var 一個 兄弟元素 動態 NPU on() pre

<input type="button" value="創建元素" id="btn"> <div id="box"></div> <p id="main">這是文中一段話</p> //點擊按鈕，動態創建元素
//方法一：$()創建元素，後用append()方法添加。append() 還可以把其他地方元素添加進這個對象中。 $(‘#btn‘).click(function() { 　　var el = $(‘<p>這是一個P標簽</p>‘); 　　// $(‘#box‘).append(el); //兩種添加方法 　　el.appendTo($(‘#box‘)); })
//方法二：.html()方法為元素 創建並添加子元素。 html() 還可以把其他地方元素添加進這個對象中。支持添加標簽。 $(‘#btn‘).click(function() { 　　$(‘#box‘).html(‘<h>標題是。。</h>‘); })
//如DOM中創建元素方法 var box = document.getElementById(‘box‘); var p = document.createElement(‘p‘); p.innerText = ‘這是第二個哦~‘; box.appendChild(p);
//jQuery中添加元素的方法： var i = 1; $(‘#btn‘).click(function () { 　　var p = $(‘<p> 第二個p標簽‘ + i + ‘</p>‘) 　　i++; //一、在元素內添加，可以把其他地方元素也添加進來：對象.html(‘元素及內容‘) 　　$(‘#box‘).html($(‘#main‘));
//二、在元素內添加，依次（往後）添加：對象.append(元素) 或者 元素.appendTo(對象) 　　$(‘#box‘).append($(‘#main‘)); 　　$(‘#box‘).append(p);
//三、在元素內添加，依次（往前）添加：對象.prepend(元素)； 　　$(‘#box‘).prepend(p);
//四、在元素前添加兄弟元素,依次（往後）添加：對象.before(元素); 　　$(‘#box‘).before(p); //五，在元素後添加兄弟元素,依次（往前）添加：對象.after(元素)； 　　$(‘#box‘).after(p);
})

jQuery中動態創建、添加元素的方法總結