一,创建元素节点:
第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>