0
<ul id="lista">
        <li>Estudiante</li>
        <li>Pedro</li>
        <li >Julio</li>
        <li>Benites</li>
        <li >Valencia</li>
        <li>Tachira</li>
      </ul>

let nodoPadre = document.getElementsByClassName("lista");

let segundoHijo = nodoPadre.childNodes[6];

segundoHijo.innerHTML =  'NUEVO';

Debo editar un texto de mi lista mediante el DOM. Sin agregar id a la li, quiero hacerlo mediante childnodes.

1
  • Deseas editar alguno de los <li> que ya tienes en tu html o deseas anexar un nuevo <li>?
    – jGomez
    Commented el 30 ene. 2022 a las 22:46

2 respuestas 2

0

Por lo que he entendido, creo que quieres algo asi:

let nodoPadre = document.getElementById("lista");
let hijos = nodoPadre.childNodes;
for (var i = 0; i < hijos.length; i++) {
  if (hijos[i].innerText == "Valencia") {
    hijos[i].innerText = "NUEVO"
    break;
  }
}

// crear nueva linea
const nueva_linea = document.createElement("li");
const texto_nuevo_linea = document.createTextNode("Nueva linea");
nueva_linea.appendChild(texto_nuevo_linea);
nodoPadre.appendChild(nueva_linea)
<ul id="lista">
  <li>Estudiante</li>
  <li>Pedro</li>
  <li>Julio</li>
  <li>Benites</li>
  <li>Valencia</li>
  <li>Tachira</li>
</ul>

Cambios realizados:

  1. He cambiado el getElementsByClassName por getElementById pues lista era un id y no una clase en tu ejemplo html.

  2. He asignado la variable hijos a todos los hijos para luego recorrerlos en un bucle.

  3. He agregado un bucle para recorrerlos.

  4. Dentro del bucle he puesto un ejemplo de como encontrar, mediante la propiedad innetText, un nodo concreto de la lista y cómo modificarlo.

  5. Una vez hecho esto salimos del bucle pues ya no necesitamos continuarlo mediante break;

  6. Y más abajo te he puesto un ejemplo de como crear una nueva linea usando createElement, createTextNode y appendChild

Ya nos diras si te vale.

0

En primer lugar, tú estás intentando seleccionar el elemento por su clase:

let nodoPadre = document.getElementsByClassName("lista");

PERO, el elemento no tiene class="lista" para poder hacer eso.

Luego, no sé por qué piensas que esto se resuelve con childNodes ¿? Si lees la documentación, verás que quien te devuelve una lista de los elementos hijos es children, que sería todo lo que necesitarías aquí para modificar el contenido de alguno de los li.

Entonces, si quieres obtener los hijos de ese ul alcanzándolos por la clase, debes asignarle una clase. Además, debes poner un índice, porque el selector por clases te trae un array (empezando en la posición 0) con todos los elementos que tengan ese clase, aunque sea uno.

Por la convención de nombre se entiende que quisieras cambiar el valor del segundo hijo. Entonces, podrías hacerlo así:

let allChildren = document.getElementsByClassName("lista")[0].children;
allChildren[1].textContent='NUEVO';
<ul id="lista" class="lista">
        <li>Estudiante</li>
        <li>Pedro</li>
        <li >Julio</li>
        <li>Benites</li>
        <li >Valencia</li>
        <li>Tachira</li>
      </ul>


Y, si quieres alcanzar el elmento por su id, puedes hacerlo así:

let allChildren = document.getElementById("lista").children;
allChildren[1].textContent='NUEVO';
<ul id="lista">
        <li>Estudiante</li>
        <li>Pedro</li>
        <li >Julio</li>
        <li>Benites</li>
        <li >Valencia</li>
        <li>Tachira</li>
      </ul>

Post-Data

Si requieres selecciones más complejas, te recomiendo usar mejor querySelector y querySelectorAll.

10
  • Ya no es lo que piensa de si se tiene que hacer con childnodes o no, es que lo pone específicamente en la redacción de su pregunta (será un ejercicio con premisas).
    – masterguru
    Commented el 30 ene. 2022 a las 22:38
  • realmente en el enunciado solo dice que quiere hacerlo con childnodes mas no dice que es obligatorio.
    – jGomez
    Commented el 30 ene. 2022 a las 22:45
  • @masterguru puede que sea un ejercicio, sólo que OP no lo especifica, solamente dice quiero, puede ser porque OP piensa que esa es la mejor forma de hacerlo. Realmente en un contexto de ejercicio no le veo demasiado sentido a querer hacerlo con childNodes, a no ser que el profesor explique luego las diferencias. Por ejemplo, para modificar el contenido, bastaría con traer los elementos. Si lees esta respuesta verás todo lo que trae childNodes, mientras que children trae solamente el elemento (1), que es lo que se necesita aquí.
    – A. Cedano
    Commented el 30 ene. 2022 a las 22:49
  • @A.Cedano solo lo decia por si no te habias dado cuenta, no es que sea partidario de una cosa u otra, de hecho antes de este "ejercicio" apenas habia jugado con los nodos. Pero si puedo me ciño a lo que preguntan, pues deduzco que si lo ponen sus motivos tendran, y en todo caso hago otras recomendaciones al final de mi respuesta (si es que tengo algo que aportar, y en este caso no lo tenia, pero tu si pues conoces mejor el tema de los nodos) o bien via comentarios.
    – masterguru
    Commented el 30 ene. 2022 a las 22:53
  • @A.Cedano pero para mi, viendo el perfil del OP y las 3 preguntas que lleva hoy, diria que esta haciendo ejercicios.
    – masterguru
    Commented el 30 ene. 2022 a las 23:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.