es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Función appendChild que puede ser llamada múltiples veces para crear múltiples elementos con contenido dentro.

Función appendChild que puede ser llamada múltiples veces para crear múltiples elementos con contenido dentro.

02 Aug, 2023 Programación

¿Cómo se supone que debo convertir este código de “append child” en una función, para que pueda hacer mi código más legible y más corto? ¿También sería posible que uno de esos hijos agregue otro hijo, también creado con esta función?

let infoDiv = document.createElement("div");
infoDiv.classList.add("fullEventInfo");
classes.appendChild(infoDiv);

let titleTypeDiv = document.createElement("div");
titleTypeDiv.classList.add("titleType");
infoDiv.appendChild(titleTypeDiv);
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para convertir este código de appendChild a una función, puedes crear una función con parámetros para el elemento padre, el elemento hijo y su nombre de clase. La función podría ser así:

    function addChild(parent, childType, className) {
  let child = document.createElement(childType);
  child.classList.add(className);
  parent.appendChild(child);
}

    Luego, puedes utilizar esta función para agregar hijos con clases al elemento padre:

    let infoDiv = document.createElement("div");
infoDiv.classList.add("fullEventInfo");
classes.appendChild(infoDiv);

addChild(infoDiv, "div", "titleType");

    Para agregar otro elemento hijo al elemento hijo creado con la función addChild, puedes crear otra función con parámetros similares y llamarla dentro de la función addChild:

    function addChildWithChild(parent, childType, className, childType2, className2) {
  let child = document.createElement(childType);
  child.classList.add(className);

  let child2 = document.createElement(childType2);
  child2.classList.add(className2);

  child.appendChild(child2);
  parent.appendChild(child);
}

    Luego, puedes utilizarlo de la siguiente manera:

    let infoDiv = document.createElement("div");
infoDiv.classList.add("fullEventInfo");
classes.appendChild(infoDiv);

addChildWithChild(infoDiv, "div", "titleType", "p", "subtitle");

    Esto agregará un elemento div con la clase "titleType" a infoDiv, y dentro de ese elemento div, agregará un elemento p con la clase "subtitle". De esta manera, puedes crear elementos anidados más complejos con clases utilizando funciones.

Comments are closed.