Javascript: Как добавить элемент "div" сразу после 2-го универсального тега "p" (без идентификатора или класса) внутри каждого сообщения или раздела контента?

Как мне вставить специальный элемент "div", который появляется сразу после 2-го родового узла (без добавления идентификатора или класса) "p" узла / тега в разделе содержимого каждой страницы, на которой я хочу, чтобы он был, с помощью JavaScript?

Например:

<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <p>3rd paragraph content.....</p>
</div>

Выход:

<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <div id="custom-div">Content here...</div>
  <p>3rd paragraph content.....</p>
</div>
Источник

2 ответа

Решение

Учитывая ваш HTML:

<input type='button' onclick='addText();' value='Add To List'/>
<input type='text' id='input'/>
<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <p>3rd paragraph content.....</p>
</div>

А так как вы не упомянули jQuery, я предоставлю ответ с простым Javascript:

var appender=1;
    function addText(){
        var parentDiv = document.getElementById('main-content');
        var input = document.getElementById('input').value;    
        var node = document.createElement("DIV");
        var textnode = document.createTextNode(input);
        node.appendChild(textnode);     
        node.id = 'custom-div_' + appender;
        var child = parentDiv.children[2];
        parentDiv.insertBefore(node, child);
        appender++;

    }

Вот рабочая демка

Обратите внимание, что существует глобальный var так что вы можете назначить разные идентификаторы для ваших динамически создаваемых элементов.

редактировать

Согласно запросу пользователя, следующий код добавит этот контент при загрузке:

<body onload="addText()">
<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <p>3rd paragraph content.....</p>
</div>
</body>

Вот обновленный Javascript:

var appender=1;
function addText(){
    var parentDiv = document.getElementById('main-content');      
    var node = document.createElement("DIV");
    var textnode = document.createTextNode("This was added dinamically");
    node.appendChild(textnode);     
    node.id = 'custom-div_' + appender;
    var child = parentDiv.children[2];
    parentDiv.insertBefore(node, child);
    appender++;

}

Вот новая демка

Обратите внимание, что переменная appender больше не нужна, я ухожу на случай, если вы захотите объединить функциональность.

Источник

Я думаю, что самый простой способ, как это,

var node = document.createElement("div");
var textnode = document.createTextNode('Content here...');
node.appendChild(textnode);
node.id = 'custom-div';
var referencenode = document.getElementById('main-content').children[1];
referencenode.parentNode.insertBefore(node, referencenode.nextSibling);

код "referencenode.parentNode.insertBefore(node, referencenode.nextSibling);" вставит узел после выбранного элемента,

вот демо

Источник
Другие вопросы по тегам