DOM结点的插入

节点的插入

内部插入append()与appendTo()

append()前面是被插入的对象，后面是要在对象内插入的元素内容

因为是内部插入，被插入的只能是对象而不能是元素内容，例如:

$("#bt1").on('click', function() {
    		//.append(), 内容在方法的后面，
    		//参数是将要插入的内容。
    		$('<div class="append">通过append方法添加的元素</div>').append($(".content"))
    	})

这就是错误，点击之后没有任何反应。下面才是正确的写法：

$(".content").append($('<div class="append">通过append方法添加的元素</div>'))

appendTo()前面是要插入的元素内容，而后面是被插入的对象，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。例如：

$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

内部插入prepend()与prependTo()

prepend是“预先”的意思，append与appendTo是在被选对象的结尾插入指定内容，prepend与prependTo是在被选对象之前插入。

外部插入after()和before()

• before与after都是用来对相对选中元素外部增加相邻的兄弟节点。
• after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
• before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

外部插入insertAfter()与insertBefore()

.before()，.after()和.insertBefore(),after()实现同样的功能,区别在于语法，内容在方法前面：

$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))