js中常⽤追加元素的⼏种⽅法：append，appendTo，after，before，i。。。js中常⽤追加元素的⼏种⽅法，点击下⾯每个按钮，即可查看效果
附上js代码：
1 <script type="text/javascript">// <![CDATA[
2 $(function(){
3//append()，在⽗级最后追加⼀个⼦元素
4        $(".append").click(function(){
5            $("#wrap").append("<p class='three'>我是⼦元素append</p>");
6        });
7
8//appendTo()，将⼦元素追加到⽗级的最后
9        $(".appendTo").click(function(){
10            $("<p class='three'>我是⼦元素appendTo</p>").appendTo($("#wrap"));
11        });
12
13//prepend()，在⽗级最前⾯追加⼀个⼦元素
14        $(".prepend").click(function(){
15            $("#wrap").prepend("<p class='three'>我是⼦元素prepend</p>");
16        });
17
18//prependTo()，将⼦元素追加到⽗级的最前⾯
19        $(".prependTo").click(function(){
20            $("<p class='three'>我是⼦元素prependTo</p>").prependTo($("#wrap"));
21        });
22
23//after()，在当前元素之后追加（是同级关系）
24        $(".after").click(function(){
25            $("#wrap").after("<p class='siblings'>我是同级元素after</p>");
26        });
js获取子元素
27
28//before()，在当前元素之前追加（是同级关系）
29        $(".before").click(function(){
30            $("#wrap").before("<p class='siblings'>我是同级元素before</p>");
31        });
32
33//insertAfter()，将元素追加到指定对象的后⾯（是同级关系）
34        $(".insertAfter").click(function(){
35            $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
36        });
37//insertBefore()，将元素追加到指定对象的前⾯（是同级关系）
38        $(".insertBefore").click(function(){
39            $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
40        });
41    });
42
43//appendChild()，在节点的最后追加⼦元素
44function appChild(){
45// 创建p节点
46var ateElement("p");
47// 创建⽂本节点
48var ateTextNode("我是⼦集appendChild新段落。");
49// 把⽂本节点添加到p节点⾥
50            para.appendChild(node);
51
52// 查div1
53var ElementById("wrap");
54// 把p节点添加到div1⾥
55            element.appendChild(para);
56    }
57// ]]></script>
View Code
效果：
我是第⼀个⼦元素
我是第⼆个⼦元素
append appendTo prepend prependTo after before appendChild insertAfter insertBefore

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。