Tengo que insertar la etiqueta p entre otras etiquetas p en este ejemplo, solo hay 3 etiquetas p en mi programa, puede haber más, así que ayúdenme.

** Esta es la estructura Html **

  <div id="container">
       <p>P1</p>
       <p>p2</p>
       <p>p3</p>
    </div>

Quiero insertar una etiqueta p en medio usando javascript. Gracias por adelantado.

-3
midnightgamer 13 sep. 2018 a las 12:21

3 respuestas

La mejor respuesta

Puede insertar elementos de muchas maneras diferentes, pero la más flexible es insertAdarestHTML y insertAdarestElement

const secondP = document.querySelector("#container p:nth-child(2)");

const html = `<p>newly added p</p>`;

// add before the second p
secondP.insertAdjacentHTML("beforebegin", html);

// add after the second p
secondP.insertAdjacentHTML("afterend", html);
<div id="container">
   <p>P1</p>
   <p>p2</p>
   <p>p3</p>
</div>
3
marzelin 13 sep. 2018 a las 09:25

Según su pregunta simplificada, una respuesta simplificada:

const p = document.querySelector("#container p:nth-of-type(1)");

p.innerHTML += "<p>new p tag</P>";

Donde como enésimo tipo (1) selecciona la primera etiqueta p.

Sin embargo, esta pregunta ha sido respondida muchas veces aquí, así que por favor, la próxima vez tómese un tiempo para investigar.

0
Tanckom 13 sep. 2018 a las 09:26

Tengo un truco fácil para hacer esto en javascript:

document.getElementById("container").innerHTML += "<p>p4</p>";

Sin embargo, debe hacerlo insertAdarestElement

tempP = document.createElement('p');
tempP.innerText = "p4";
document.getElementById("container").insertAdjacentElement('afterend',tempP);
0
Walter 13 sep. 2018 a las 09:29