创建添加节点:
创建jquery对象:$("<a href="http://baidu.com" target="_blank">百度请点击我</a>");
append:添加节点到子元素的最后面 $("div").append($("p"));{找到div元素,在div元素的最后面添加一个p元素}
prepend:添加节点到子元素的最前面 $("div").prepend($("p"));{找到div元素,在div元素的最前面添加一个p元素}
appendTO:将子元素添加到父元素的最后面 $("p").appendTo($("div"));{将p元素添加到div元素的最后面}
prependTo:将子元素添加到父元素的最前面 $("p").prependTO($("div")); {将p元素添加到div元素的最前面
after:将一个元素添加到另一个元素的后面,作为同级元素(兄弟元素平级的)
before:将一个元素添加到另一个元素的前面,作为同级元素(兄弟元素平级的)
<div class="box">
我是div中的元素
</div>
<p>我是外面的p1元素</p>
<p>我是外面的p2元素</p>
<p>我是外面的p3元素</p>
<p>我是外面的p4元素</p>
<p>我是外面的p5元素</p>
<script>
//在div元素的后面添加一个a元素并且点击能跳转百度
var $a=$('<a href="www.baidu.com" target="_blank">点击我</a>');
console.log($a)
$("div").append($a);
//将p2元素添加到div元素的最后面
$("p").eq(1).appendTo("div");
//将p3 p4元素添加到div元素的最前面
$("p").eq(2).prependTo("div");
var $b=$("p").eq(3);
$("div").prepend($b);
</script>
删除节点与清空节点
empty();清空一个元素中的所有内容包括事件。 html("");也可以清空内容,但是不要这么写,会内容泄露(他会把元素中的元素添加一个”“的内容)
remove();移除元素
clone();克隆元素,不传参数也是深度复制 如果传递true 也是深度复制,元素的事件也会克隆,false则不会 默认为false。
<div class="box">
我是div中的元素
</div>
<p>我是外面的p1元素</p>
<p>我是外面的p2元素</p>
<p>我是外面的p3元素</p>
<p>我是外面的p4元素</p>
<p>我是外面的p5元素</p>
<script>
//删除p5元素节点
$("p").eq(4).remove();
//克隆p4元素节点到div元素节点的最后面
$("p").eq(3).clone().appendTo($("div"));
//清空div所有元素节点
$("div").empty();
</script>