本文主要教你一些实用技能，用jQuery启发原生DOM操作方法。均来自网友翻译结合体，大部分都是编程代码，适用于有基础的学员。
幸运的是，从那以后，很多事情都发生了变化。 浏览器已经变得更加符合标准，原生JavaScript也有了跨越式发展。 随着情况的改善，我们看到人们正在质疑是否仍然需要jQuery。 我不打算在这里讨论这个问题，而是想提供一些想法，因为我提供了六个原生DOM操作方法，这些方法受到了这个伟大的库的启发。 这些方法如下：
const parent = document.createElement('div')const child1 = document.createElement('h1')parent.append(child1)parent.outerHTML// <div><h1></h1></div>const child2 = document.createElement('h2')parent.append(child2)parent.outerHTML// <div><h1></h1><h2></h2></div>
如果您询问它与原生appendChild方法的不同之处，这是情有可原的。 嗯，第一个区别是append()可以一次使用多个参数，相应的节点将被附加到子列表中，就像 jQuery append方法一样。 继续前面的代码段：
字符串被转换为Text节点，因此不会解析任何HTML：
parent.append('<p>foo</p>')parent.outerHTML/* Outputs:<div> <h1></h1> <h2></h2> <p></p> <p></p> <p></p> just some text <p>foo</p></div>*/
这与jQuery方法相反，该方法解析字符串标记，并生成相应的节点并插入到DOM树中。
通常情况下，如果附加节点已经存在于树中，则首先将其从旧位置移除：
const myParent = document.createElement('div')const child = document.createElement('h1')myParent.append(child)const myOtherParent = document.createElement('div')const myOtherParent.append(child)myOtherParent.outerHTML// <div><h1></h1></div>myParent.outerHTML// <div></div>"
方法的返回值是 undefined. 相应的jQuery方法是 prepend().
- after()
after方法是另一种插入方法，但是这一次它必须在子节点上调用，也就是一个具有父节点的节点。 节点作为相邻的兄弟节点插入，如以下示例所示：
const parent = document.createElement('ul')const child = document.createElement('li')child.append('First item')parent.append(child)child.after(document.createElement('li'))parent.outerHTML// <ul><li>First item</li><li></li></ul>
该方法的返回值也是undefined. 对应的 jQuery 方法是 before().
5. replaceWith()
假设我们想用另一个节点替换一个DOM节点。 当然，他们可能包含子节点，所以这个操作将替代整个DOM子树。 在介绍这套方便的方法之前，我们将使用replaceChild():
const parent = document.createElement('ul')parent.innerHTML = ` <li>first</li> <li>second</li> <li>third</li>`parent.outerHTML// <ul><li>first</li><li>second</li><li>third</li></ul>"const secondChild = parent.children[1]const newSecondChild = document.createElement('li')newSecondChild.innerHTML = '<a href="#">second</a>'secondChild.parentNode.replaceChild(newSecondChild, secondChild)parent.outerHTML/* Outputs:<ul> <li>first</li> <li><a href="#">second</a></li> <li>third</li></ul>*/
const newerSecondChild = document.createElement('li')newerSecondChild.append('another item')const newThirdChild = document.createElement('li')newThirdChild.append('yet another item')newSecondChild.replaceWith(newerSecondChild, newThirdChild)parent.outerHTML/* Outputs:<ul> <li>first</li> <li>another item</li> <li>yet another item</li> <li>third</li></ul>*/
该方法的返回值也是undefined.。你可以将该方法与 jQuery的同音异义方法作比较。
remove()
从DOM树中删除节点怎么办？ '老’方法是removeChild()。 如其名称所示，它必须在要删除的节点n的父节点上调用：
这种行为更类似于jQuery的detach方法。
浏览器支持
在撰写本文时，桌面浏览器上前五个方便方法 prepend(), append(), before(), after() 和replaceWith()的支持状态如下所示：
Chrome从54版本开始实现它们。
Firefox从版本49开始支持它们。
Safari从10版开始支持它们。
Opera 从版本41开始支持他们。
令人失望的是，它们在Internet Explorer中不支持，也不支持Microsoft Edge（尽管对于Edge，该功能正在开发中。
remove方法得到了更广泛的支持。 Microsoft Edge从版本14开始实现它。
对于那些还没有提供这些方法的浏览器,，有几种polyfills 是可用的. childNode.js 就是其中之一, 还有其他的polyfills可以在致力于这些方法的MDN 页面中找到, 在本文中已经提到过了。
- 额外的方法: insertAdjacentHTML
在结束之前, 说一下insertAdjacentHTML。它提供了与上面列出的前四种方法类似的插入操作。 — append(), prepend(),after(), before() —用HTML字符串指定要添加的内容：
const parent = document.createElement('div')parent.insertAdjacentHTML('beforeend', '<p>A paragraph</p>')parent.insertAdjacentHTML('beforeend', '<p>Another paragraph</p>')parent.insertAdjacentHTML('afterbegin', '<p>Yet another paragraph</p>')const grandParent = document.createElement('div')grandParent.append(parent)parent.insertAdjacentHTML('afterend', '<div class="after"></div>')parent.insertAdjacentHTML('beforebegin', '<div class="before"></div><div class="before2"></div>')grandParent.outerHTML/* Outputs:<div> <div class="before"></div> <div class="before2"></div> <div> <p>Yet another paragraph</p> <p>A paragraph</p> <p>Another paragraph</p> </div> <div class="after"></div></div>*/