[Web 前端] 029 jQuery 节操

Posted 2020-11-17 yorkyu

jQuery 元素节点操作

1. 创建节点

var Div = $('<div>这是一个div元素</div>');

2. 插入节点

2.1 append() 和 appendTo()

• 在现存元素的内部，从后面插入元素

<div id="div1"></div>

var Span = $('<span>这是一个span元素</span>');
$('#div1').append(Span);        // 在指定元素 div1 里面的尾部插入新的元素 Span
// Span.appendTo($('#Div1'));   // 将新的元素 Span 插入到指定的元素 div1 的尾部，效果同上一行

2.2 prepend() 和 prependTo()

• 在现存元素的内部，从前面插入元素

2.3 after() 和 insertAfter()

• 在现存元素的外部，从后面插入元素

2.4 before() 和 insertBefore()

• 在现存元素的外部，从前面插入元素

3. 删除节点与清空节点

$(element).remove();            // 删除元素，可以删除自己
$(element).empty();             // 清空元素，不删除自己

4. 克隆节点

• 如果单纯的只是为了克隆元素，那么里面不需要传参数
• 如果需要连同元素身上的事件一起克隆，那就在括号中写 true

$(element).clone(true);

5. 注意事项

• 插入元素的时候，要先进行克隆，再进行插入操作，不然相当于对原来的元素作“剪切”+“粘贴”

<button>克隆</button>
<button>注意</button>
<div class="wrap"></div>

$('button').eq(1).click(function(){
    // $('.wrap').append($('button').eq(0));           // 将第一个按钮添加到 wrap 中
    $('.wrap').append($('button').eq(0).clone());   // 先克隆，再插入
});