1.创建一个标签

  var div = document.createElement("div");//原始的
  var div = $("<div/>");//通过jQuery方式
  var div = $("<div></div>");//通过jQuery方式

2.添加到父标签里

  var father = $("body");
  father.append(div)

所有方法：

内部插入

内部，即是针对子标签。注意父标签里的文本也是一个节点。
可以添加jQuery对象（即标签），也可以添加文本内容
* append(content|fn)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
* appendTo(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例子2。

例子1

  <div class="first"></div>
  <div class="first"></div>
  var div = $("<div><div/>");
  div.appendTo($(".first"));

image.png

例子2

  <div class="first"></div>
  <div class="first"></div>
......
  $("<p/>")
   .appendTo(".first")
   .addClass("test")
   .end()
   .addClass("test2");

使用了end

不使用end
* prepend(content|fn)
用于向所有匹配元素内部的开始处插入内容

  <div class="first">您好！
    <p></p>
  </div>
  $(".first").append("<div/>");

添加到了最后面

<div class="first">您好！
  <p></p>
</div>
$(".first").prepend("<div/>");

添加到了最前面
* prependTo(content)

  <p>I would like to say: </p>
  <div id="foo">这是foo</div>
.......
  $("p").prependTo("#foo");

把所有匹配的元素前置到另一个、指定的元素元素集合中。

将获取的p标签添加到div的最前面

外部插入

外部，主要针对兄弟节点
* after(content|fn)
写法：$(A).after(B)
作用：把B插入到A后面
在匹配内容之后插入一些HTML标记代码。

  <p>I would like to say: </p>
  <div id="foo">这是foo</div>
......
  $("p").after("<b>Hello</b>");

image.png
在匹配内容之后插入纯文本内容

  <p>I would like to say: </p>
  <div id="foo">这是foo</div>
  <b>Hello</b>
......
  $("p").after("您好！");

image.png

在匹配内容之后插入一个DOM元素。

$("p").after( $("#foo")[0] );

image.png
在匹配内容之后插入一个jQuery对象(类似于一个DOM元素数组)。

  <p>I would like to say: </p>
  <div id="foo">这是foo</div>
  <b>Hello</b>
......
$("p").after( $("b") );

image.png
* before(content|fn)
跟after类似
* insertAfter(content)
写法：$(A).insertAfter(B)
作用：把A插入到B后面
* insertBefore(content)

包裹

参数不能是jQuery对象
* wrap(html|ele|fn)
语法：$(A).wrap(B)
作用：给A添加一个父级标签B
把所有匹配的元素用其他元素的结构化标记包裹起来（添加一个父级标签）
参数是function时可用于原先标签的内容作为新父级标签的某个属性的属性值

 //$("p").wrap("<div/>")
  $("p").wrap("<div>HHHHH</div>")

给p标签添加了一个父级div

<b>Hello</b>
$('b').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

b标签被class为Hello的div包围

参数不能是jQuery对象

$("b").wrap($("#foo"));//错误的
$("b").wrap($("#foo")[0]);//正确的

image.png
* unwrap()
语法：$(A).unwrap(B)
作用：移除A标签的父级标签B
能快速取消 .wrap()方法的效果。
匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素
* wrapAll(html|ele)
* wrapInner(html|ele|fn)