Digamos que tengo un div , como el siguiente:
<div id="mainDIV">Area to remove <p>Area to not remove</p></div> Quiero eliminar el contenido de div/innerHTML hasta la etiqueta p . Intenté eliminarlo de la siguiente manera:
document.getElementById("mainDiv").innerHTML = "" Si bien esto eliminó el área que quería eliminar, también eliminó el elemento p y su contenido.
¿Hay alguna forma de hacer esto? ¡Gracias!
Suponiendo que lo que se eliminará siempre será el primer nodo de texto , puede eliminar ese primer nodo secundario.
const mainDiv = document.querySelector('#mainDIV'); mainDiv.removeChild(mainDiv.firstChild); <div id="mainDIV">Area to remove <p>Area to not remove</p></div> Pero también cuida tu ortografía. mainDiv no es mainDIV .
Puede obtener el contenido de <p> y luego insertarlo en el HTML interno de #mainDIV, como:
document.getElementById('mainDIV').innerHTML = document.getElementById('mainDIV').querySelector('p').outerHTML;puede usar la función 'dividir' así como:
var your_div = document.getElementById("mainDiv"); //splits the innerHTML of the div at "<p>" and selects the inside p side var just_the_p = your_div.innerHTML.split("<p>")[1]; your_div.innerHTML = "<p>"+just_the_p;el HTML interno de tu div ahora es "Área para no eliminar" (más la etiqueta p)
también tenga en cuenta que la división eliminará el inicio de la etiqueta p, así que simplemente agréguela más tarde