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

<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);

})