前言：
先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）
创建流程比较简单，大体如下：
- 创建节点(常见的：元素、属性和文本)
- 添加节点的一些属性
- 加入到文档中
流程中涉及的一点方法：
- 创建元素：document.createElement
- 设置属性：setAttribute
- 添加文本：innerHTML
- 加入文档：appendChild
如右边代码所示，写一个最简单的元素创建，我们会发现几个问题：
- 每一个元素节点都必须单独创建
- 节点是属性需要单独设置，而且设置的接口不是很统一
- 添加到指定的元素位置不灵活
- 最后还有一个最重要的：浏览器兼容问题处理
针对这一系列的DOM操作的问题，jQuery给出了一套非常完美的接口方法
js原生方法创建元素：
<script type="text/javascript"> ???????????var body = document.querySelector(‘body‘); ???????????????document.addEventListener(‘click‘,function(){ ???????????????????????????????//创建2个div元素 ???????????????var rightdiv = document.createElement(‘div‘) ???????????????var rightaaron = document.createElement("div"); ???????????????????//给2个div设置不同的属性 ???????????????rightdiv.setAttribute(‘class‘, ‘right‘) ???????????????rightaaron.className = ‘aaron‘ ???????????????rightaaron.innerHTML = "动态创建DIV元素节点"; ???????????????????//2个div合并成包含关系 ???????????????rightdiv.appendChild(rightaaron) ?????????????????????????????????????//绘制到页面body ??????????????????body.appendChild(rightdiv) ???????????????},false) ???????</script>jquery方法创建元素：
$("<div class=‘right‘><div class=‘aaron‘>动态创建DIV元素节点</div></div>").append()appendTo()
<script type="text/javascript"> ???????$("#bt1").on(‘click‘, function() { ???????????//.append(), 内容在方法的后面， ???????????//参数是将要插入的内容。 ???????????$(".content").append(‘<div class="append">通过append方法添加的元素</div>‘) ???????}) ???</script> ???<script type="text/javascript"> ???????$("#bt2").on(‘click‘, function() { ???????????//.appendTo()刚好相反，内容在方法前面， ???????????//无论是一个选择器表达式 或创建作为标记上的标记 ???????????//它都将被插入到目标容器的末尾。 ???????????$(‘<div class="appendTo">通过appendTo方法添加的元素</div>‘).appendTo($(".content")) ???????}) ???</script>DOM外部插入after()与before()
节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容
选择器的描述：
- before与after都是用来对相对选中元素外部增加相邻的兄弟节点
- 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
- 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码
注意点：
- after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
- before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插
DOM内部插入prepend()与prependTo()
在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo
选择器的描述：
通过右边代码可以看到prepend与prependTo的使用及区别：
- .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
- .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
- 对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
- 而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。
这里总结下内部操作四个方法的区别：
- append()向每个匹配的元素内部追加内容
- prepend()向每个匹配的元素内部前置内容
- appendTo()把所有匹配的元素追加到另一个指定元素的集合中
- prependTo()把所有匹配的元素前置到另一个指定的元素集合中
【总结整理】JQuery基础学习---DOM篇
原文地址：https://www.cnblogs.com/lianghong/p/8476124.html