jQuery-DOM操作之创建、插入、删除元素

1、创建元素

$('<li>啦啦啦</li>')

$('ul').append($('<li>啦啦啦</li>'))　　把创建好的li元素添加到ul中

$('ul').append($('<li title="雪梨">雪梨</li>'))

2、插入元素方法

append()--想每个匹配元素的内部追加内容

$('ul').append($('<li title="雪梨">雪梨</li>'))  //在ul中追加li元素

appendTo()--将所有匹配的原则追加到指定的的元素中

$('<span></span>').appendTo('p'); //将span元素插入到p元素中

prepend()

$('p').prepend('<span>你好</span>')  //<p><span>你好</span>我想说：</p>

prependTo()

$('<span>你好</span>').prependTo('p')  ////<p><span>你好</span>我想说：</p>

after()--在每个匹配的元素之后插入内容

$('p').after('<span>你好</span>') //<p>我想说：</p><span>你好</span>

insertAfter()--将所有匹配的元素插入到指定元素的后面

$('<span>你好</span>').insertAfter('p')  //<p>我想说：</p><span>你好</span>

before()

$('p').before('<span>你好</span>')  //<span>你好</span><p>我想说：</p>

insertBefore()

$('<span>你好</span>').insertBefore('p') //<span>你好</span><p>我想说：</p>

3、删除节点

remove()

$('ul li:eq(1)').remove();  //删除ul中的第二个li元素

remove()方法返回值是一个指向已被删的节点的引用，因此可以在以后再使用这个元素

var $li = $('ul li:eq(1)').remove();  //删除ul中的第二个li元素
$li.appendTo('ul') //把删除的节点又重新添加到ul元素里面

remove()方法可以通过传递参数选择性的删除元素

$('ul li').remove('li[title!=菠萝]');  //将li元素中title属性不为菠萝的li元素删除

empty()--严格的说它并不是删除节点，而是清空节点，清空元素中的所有后代节点

$('ul li:eq(1)').empty()  //清空第二个li元素里面的内容，注意元素里面，并不删除元素

 

转载于:https://www.cnblogs.com/halai/p/6867691.html