将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');

不知道从这里去哪里？

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和其他框架在那里可以为您减轻这些负担：）

Answer 2

您可能会发现此功能很有用（我没有测试）

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

}

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);
   }
}   

Answer 4

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML

document.querySelectorAll('.section > h1').forEach((headline) => {
    headline.insertAdjacentHTML('afterend', '<p>This paragraph was inserted with jQuery</p>');
})