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

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

Например:

<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>

источник

2013-06-16 netizen0911

'' querySelectorAll' с п-м-child', а затем захватить элемент и 'insertBefore' следующий родственный. – elclanrs

Учитывая ваш 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++; 

    }

Вот рабочая demo

Обратите внимание, что существует глобальный 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++; 

}

Вот новый demo

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

источник

2013-06-16 02:24:05 isJustMe

Это отлично работает, но я хочу, чтобы функция автоматически вызывалась после загрузки страницы. Как настроить код для этого? Благодаря! – netizen0911

без проблем :) см. Обновленный код. Он будет вставлять строки при загрузке сейчас, также, если вы найдете этот ответ полезным, пожалуйста, подумайте о повышении и принятии, чтобы он полезен другим пользователям :) – isJustMe

Awesome! Большое спасибо! Голосование сейчас. Один последний вопрос, хотя ... С переменной «textnode» я могу писать html-теги внутри него или только простые тексты? – netizen0911

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

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 (узел, referencenode.nextSibling);" вставит узел в после выбранного элемента,

вот DEMO

источник

2016-11-25 04:22:17

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

ответ

Смежные вопросы