原生dom和jquery能不能相互转换（放弃jQuery？你绝对没用这6个原

卸载ie7 放弃jQuery？你绝对没用这6个原生DOM ！

jQuery得以流行的主要原因是可让程序员轻松地选择DOM元素，遍历并修改其内容。但这是在很多年前，那时程序员还被IE7困扰，ECMAScript 5还未面世。

在那之后，世界发生了翻天覆地的变化。浏览器已经变得称心如意，JavaScript出现了跨越式发展。这时，就有程序员站出来说，“我们还需要jQuery吗？”恐怕你是不知道这六个原生DOM 吧！看完，没准你会因为jQuery库够酷而爱上JavaScript！

1、append()

append 执行插入操作，即将节点添加到DOM树。它将参数附加到被调用节点的子节点列表中，请考虑以下示例

程序员或许会问这与本机appendChild 有什么不同呢？之一个区别是，anappend()可以一次使用多个参数，相应的节点将被附加到子列表中。继续代码

，一个参数可以是一个字符串。所以，使用appendChild()时，必须使用相当详细的语法

parent.appendChild（document.createTextNode（'just some text'））

与append()操作一样短

字符串转换为Text节点，不会解析任何HTML

这与jQuery 形成对照，该 分析了标记字符串，并生成相应节点插入到DOM树中。

通常情况下，如果附加节点已存在于树中，则从其旧位置移除

append()和appendChild()之间的一个区别是后者返回附加节点，而前者返回undefined。

2、prepend()

prepend 与append()非常相似。添加了子项，它们将被添加到调用该 节点的子节点之前，就在之一个子节点之前

的返回值为undefined。

3、after()

after 是另一种插入 ，但它必须在子节点之后调用，也就是一个具有确定父节点的节点。节点作为相邻的兄弟节点插入，如以下所示

返回值是undefined。

4. before()

before()与after()类似，在子节点之前插入

返回值同样是undefined。

5. replaceWith()

假设程序员想替换一个DOM节点。，他们可能有子节点，所以这个操作将替代整个DOM子树。在介绍这套 之前，将使用replaceChild（）

可以使用replaceWith以不冗长的方式执行相同的操作

除了较短的语法之外，此 的一个特点是接受几个参数，允许用其他节点列表替换一个节点。继续以前的交互式JavaScript会话

的返回值也是undefined。

6、remove()

从DOM树中删除节点怎么办？常用的 是removeChild()。 如其名称所示，它必须在被删除节点n的父节点上调用

，使用remove()，操作相当简单

本机与jQuery操作的不同之处在于如何处理附加到已删除节点的事件侦听器。 jQuery删除与元素相关联的所有绑定事件和数据，而本机 不会触及事件侦听器

这种行为更类似于jQuery detach 。

浏览器支持

写这篇文章时，这几种 所获得的浏览器支持为

prepend()gtappend()gtbefore()gtafter()gtreplaceWith()

桌面浏览器如下

谷歌浏览器从54版开始，全面支持上述 。

Firefox从49版本开始，全面支持上述 。

Safari从10版开始，全面支持上述 。

Opera从41版开始，全面支持上述 。

，请注意Internet Explorer并不支持，Microsoft Edge也不支持（尽管对于Edge而言，该功能正在开发中）。remove 得到了更广泛的支持，Microsoft Edge自14版本以来就实现了。

insertAdjacentHTML

结束之前，还想说几句insertAdjacentHTML。它提供类似于上面列出的前四种 的插入操作append()，prepend()，after()，before()，并且要添加的内容使用HTML字符串指定

请注意，我们必须使父节点成为另一个节点的子节点才能使用该位置参数beforebegin andafterend。

幸运的是，insertAdjacentHTML()随处可见。

结论

看完这些 之后，你认为jQuery如何？还是因为缺乏IE支持而打算放弃呢？程序员来说说你们的看法吧！万一让这个世界有点不同了呢！

如何 jquerydom jquery和dom直接可以做哪些交互