jquery-dom操作内部插入节点

内部插入是将content插入到selector节点内部，包括内部的头部和尾部。插入后的节点与原节点是父子关系。

1.append()   方法在被选元素的结尾（仍然在内部）插入指定内容,向每个匹配的元素内部追加内容.

<p>hello</p>

$("p").append("<b>World</b>");

结果：<p>Hello<b>world</b></p>

2.appendTo()   把所有匹配的元素追加到另一个指定的元素元素集合中

<p>I</p>
<div></div><div></div>

$("p").appendTo("div");

结果：<div><p>I</p></div>
<div><p>I</p></div>

3.prepend() 方法在被选元素的开头（仍位于内部）插入指定内容

<p>This is a paragraph.</p>
<button id="btn1">Click me</button>

$(document).ready(function(){
  $("#btn1").click(function(){
  $("p").prepend("<b>Hello world!</b>");
});
});

结果：<p><b>Hello world!</b>This is a paragraph.</p>

4.prependTo()  方法将指定内容（仍位于内部）插入被选元素的开头

<p>This is a paragraph.</p>
<button id="btn1">Click me</button>

$(document).ready(function(){
  $("#btn1").click(function(){
  $("<b>Hello world!</b>").prependTo("p");
});
});

结果：<p><b>Hello world!</b>This is a paragraph.</p>