一，创建元素节点：
第1个步骤可以使用jQuery的工厂函数$()来完成，格式如下：
$(html);
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
var $li_1 = $("<li></li>"); // 创建第一个<li>元素 var $li_2 = $("<li></li>"); // 创建第二个<li>元素
二，插入元素节点：
1.append()
//<p>我是一个p标签</p> //append()向每个匹配的元素内部追加内容 $('p').append('<p>您好！</p>'); //结果；<p>我是一个p标签<p>您好！</p></p> $('<p>您好！</p>').appendTo('p'); //结果；<p>我是一个p标签<p>您好！</p></p>
2.prepend()
//<p>我是一个p标签</p> //prepend()向每个匹配的元素内部的前面 追加内容 $('p').prepend('<p>您好！</p>'); //结果；<p><p>您好！</p>我是一个p标签</p> $('<p>您好！</p>').prependTo('p'); //结果；<p><p>您好！</p>我是一个p标签</p>
3.after()
//<p>我是一个p标签</p> //after()向每个匹配的元素之后添加内容 $('p').after('<p>您好！</p>'); //结果；<p>我是一个p标签</p><p>您好！</p> $('<p>您好！</p>').insertAfter('p'); //结果；<p>我是一个p标签</p><p>您好！</p>
4.before()
//<p>我是一个p标签</p> //before()向每个匹配的元素之前添加内容 $('p').before('<p>您好！</p>'); //结果；<p>您好！</p><p>我是一个p标签</p> $('<p>您好！</p>').insertBefore('p'); //结果；<p>您好！</p><p>我是一个p标签</p>
三，删除元素节点：
<p title="选择你最喜欢的水果？">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul>
//1、 remove() 方法 //当某个节点用remove() 方法删除后， 该节点所包含的所有后代节点将同时被删除。 //这个方法的返回值是一个指向已被删除的节点的引用， 因此可以在以后再使用这些元素。 //该节点所有绑定的事件、 附加的数据都会被删除 var $li = $("ul li:eq(0)").remove();// $li.appendTo("ul"); //2、 detach() 方法 //detach () 和remove() 一样， 也是从DOM中去掉所有匹配的元素。 //但需要注意的是， 这个方法不会把匹配的元素从jQuery对象中删除， 因而可以在将来再使用这些匹配的元素。 //与remove() 不同的是， 所有绑定的事件、 附加的数据都会保留下来。 var $li = $("ul li:eq(0)").detach(); $li.appendTo("ul"); //3、 empty() 方法 //严格地讲， empty() 方法并不是删除节点， 而是清空节点， 它能清空元素中的所有后代节点。 var $li = $("ul li:eq(0)").empty(); $li.appendTo("ul");
四，复制元素节点：
<p title="选择你最喜欢的水果？">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul>
$("ul li:eq(0)").click(function () {
console.log(this);
$(this).clone().appendTo('ul');//复制当前单击的节点，并将它追加到ul元素中
})
五，替换元素节点：
<body> <p title="选择你最喜欢的水果？">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { $('p').click(function () { $('p').replaceWith('<span>你最不喜欢的水果是？</span>') //span元素替换p元素 $("<span>你最不喜欢的水果是？</span>").replaceAll('p') //span元素替换p元素 }) }); </script> </body>
六，包裹元素节点：
<body> <p title="选择你最喜欢的水果？">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { $('p').click(function () { $('p').wrap('<span></span>');//用<span>标签是包裹住p标签 //<span><p title="选择你最喜欢的水果？">你最喜欢的水果是？</p></span> }) }); </script> </body>