javascript - 将 jQuery 转为普通 JS - 在 h1 之后插入 p 元素

Question

关于如何将此 jQuery 转换为 vanilla JS 的任何想法:

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

我是 jQuery 新手，甚至是 vanilla 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);
    }
}

See it in action

请注意，您还可以使用textContent/innerText来代替创建文本节点。很高兴您尝试学习如何直接操作 DOM，而不是仅仅让 jQuery 完成所有工作。很高兴理解这些东西，只需记住 jQuery 和其他框架可以为您减轻这些负担:)