Любые идеи о том, как я бы преобразовал этот JQuery в JS Vanilla:

$('.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');

Не уверен, куда идти отсюда?

5
RyanP13 10 Авг 2010 в 03:15

4 ответа

Лучший ответ

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 и другие фреймворки существуют для того, чтобы облегчить вам эти нагрузки :)

4
Andy E 9 Авг 2010 в 23:41

Вы можете найти эту функцию полезной (я не тестировал)

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

}
2
spender 9 Авг 2010 в 23:42

О, это не так плохо ...

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);
   }
}   
1
MooGoo 9 Авг 2010 в 23:55

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

document.querySelectorAll('.section > h1').forEach((headline) => {
    headline.insertAdjacentHTML('afterend', '<p>This paragraph was inserted with jQuery</p>');
})
0
Larmia 27 Сен 2019 в 12:14