将jQuery转换为原生JS - 在h1后插入p元素

Question

任何想法如何将这个jQuery转换为原始的JS：

$('.section > h1').after('<p>This paragraph was inserted with jQuery</p>');

我是新手jQuery，对原生JS更是一窍不通。

我的进展只有这么多：

var newP = document.createElement('p');

var pTxt = document.createTextNode('This paragraph was inserted with JavaScript');

var header = document.getElementsByTagName('h1');

不确定接下来该怎么做？

- RyanP13

---

这将是一篇很好的博客文章，说明为什么使用jQuery可以节省大量时间。 - Pointy

Answer 1

jQuery在幕后为您完成了很多工作。相应的DOM代码可能如下所示:

// Get all header elements
var header = document.getElementsByTagName('h1'),
    parent,
    newP,
    text;

// Loop through the elements
for (var i=0, m = header.length; i < m; i++) {
    parent = header[i].parentNode;
    // Check for "section" in the parent's classname
    if (/(?:^|\s)section(?:\s|$)/i.test(parent.className)) {
        newP = document.createElement("p");
        text = document.createTextNode('This paragraph was inserted with JavaScript');
        newP.appendChild(text);
        // Insert the new P element after the header element in its parent node
        parent.insertBefore(newP, header[i].nextSibling);
    }
}

点击查看演示

请注意，您也可以使用textContent/innerText而不是创建文本节点。很好，您正在尝试学习如何直接操作DOM，而不仅仅是让jQuery完成所有工作。理解这些内容很好，只需记住，jQuery和其他框架可帮助您轻松完成这些任务 :)

- Andy E

Answer 2

你可能会发现这个函数很有用（我没有测试过）。

function insertAfter(node, referenceNode) {
  referenceNode.parentNode.insertBefore(node, referenceNode.nextSibling);

}

- spender

---

如果nextSibling不存在，它将返回null，所以不需要检查。如果insertBefore的第二个参数是null，则元素将被追加到末尾，无需使用nextSibling进行检查。请注意保持原文意思，同时让翻译更加通俗易懂，不提供任何解释或额外内容。 - Andy E

Answer 3

哦，这并不那么糟糕...

var h1s = document.getElementsByTagName('h1');

for (var i=0, l=h1s.length; i<l; i++) {
  var h1 = h1s[i], parent = h1.parentNode;
  if (parent.className.match(/\bsection\b/i)) {
     var p = document.createElement('p');
     p.innerHTML = 'This paragraph was inserted with JavaScript';

     parent.insertBefore(p, h1.nextSibling);
   }
}   

- MooGoo