append appendChild appendTo区别

1.append和appendChild的区别

append是jquery文档操作用法

① append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

$(selector).append(content)

1 $("button").click(function(){

2   $("p").append(" <b>Hello world!</b>");

3 });

②使用函数在指定元素的结尾插入内容。

$(selector).append(function(index,html))

1 $(document).ready(function(){

2   $("button").click(function(){

3     $("p").append(function(n){

4       return "<b>This p element has index " + n + "</b>";

5     });

6   });

7 });

appendChild

appendChild() 方法在指定元素节点的最后一个子节点之后添加节点。

该方法返回新的子节点。

appendChild(node)

1 　　<div id="div1">回首向来萧瑟处，归去，也无风雨也无晴</div>

2     <script type="text/javascript">

3     　　var op=document.createElement('p');

4     　　var odiv=document.getElementById('div1');

5     　　op.innerHTML="是的啊";

6     　　odiv.appendChild(op);

7     </script>

返回结果是

<div id="div1">

回首向来萧瑟处，归去，也无风雨也无晴

<p>是的啊</p>

</div>

返回了p节点

2.append和appendTo

appendTo

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

$(content).appendTo(selector)

$("button").click(function(){

  $("<b>Hello World!</b>").appendTo("p");

});

append 和appendTo都是jquery的用法，所以append或appendTo前的元素一定是jquery对象。

$("p").append("<a>111</a>")等价于$("<a>111</a>").appendTo($("p");