Elemento es anexado pero no se muestra en siguienteElementSibling [updated]

Tengo este programa que puede hacer los closables dinámicamente. Cuando el usuario hace clic en una caja de entrada creada y se muestra un botón en el contenido del obstruible. El usuario puede introducir texto en el cuadro de texto y luego pulsar el botón. Luego el texto de los usuarios se mostrará en el contenido de obstrucción seleccionado.

Todo funciona, bien excepto cuando trato de anexar a los usuarios la entrada a la lista. Estoy tratando de anexar la entrada de los usuarios con esta función, pero no funciona:

    var taskCounter = 0;
function addTask() {
  var text = document.getElementById("taskInput").value;
  console.log(text);
  var newTask = $(""+ text + "
");
  newTask.id = 'temp' + taskCounter;
  console.log(newTask.id);
  taskCounter++
  var newContent = document.createTextNode(text);

  $(currentContent).append(newTask); //where is it being append to??
  console.log("added") //it say it added but where?
}

¿Por qué no se muestra la entrada de los usuarios en el closable seleccionado? Y si no estoy haciendo esto correctamente ya, ¿cómo anexas un elemento creado dinámicamente a un elemento siguienteElementSibling?

Aquí está mi código completo:

var currentClosable;
var currentContent;
function selectedColl(){
 document.getElementById("inputTaskDiv").style.display = "block";
 currentClosable = event.target;
 currentContent = currentClosable.nextElementSibling;
 console.log(currentContent);
  var inputTaskDiv = document.getElementById("inputTaskDiv");
  currentContent.append(inputTaskDiv);
}

var taskCounter = 0;
function addTask() {
  var text = document.getElementById("taskInput").value;
  // create a new div element and give it a unique id
  var newTask = $(""+ text + "
");
  newTask.id = 'temp' + taskCounter;
  taskCounter++
  // and give it some content
  var newContent = document.createTextNode(text);

  $(currentContent).append(newTask); //where is it being append to????
}

var elementCounter = 0;
var elementCounterContent = 0;
var text;
function addElement() {
  text = document.getElementById("input").value;
  // create a new div element and give it a unique id
  
  var newDiv = $("").text(text);
  var newContentOfDiv = $("
");


  newDiv.id = 'temp' + elementCounter;
  newContentOfDiv.id = 'content' + elementCounterContent;

  newDiv.classList = "div";
  elementCounter++
  elementCounterContent++
  // and give it some content
  var newContent = document.createTextNode(text);

  // add the newly created element and its content into the DOM

  document.getElementById("input").value = " ";
  $("body").append(newDiv, newContentOfDiv);

  newDiv.click(function() {
    this.classList.toggle("active");
    content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

     Add
     
   

     Add Task
    

Pregunta hecha hace 3 años, 4 meses, 27 días - Por byteninja

2 Respuestas:

• El problema que estás enfrentando es que estás usando la librería jQuery para crear elementos y luego intentas manipularlos como si fueran elementos DOM normales. Aquí te dejo una solución para corregir ese problema y lograr que la entrada de los usuarios se muestre en el closable seleccionado:

  • En la función addTask, modifica la creación del nuevo elemento para que sea un elemento DOM normal en lugar de uno creado con jQuery:

  javascript
  function addTask() {
    var text = document.getElementById("taskInput").value;
    var newTask = document.createElement("input");
    newTask.type = "checkbox";
    var label = document.createElement("label");
    label.textContent = text;
    newTask.appendChild(label);
    newTask.innerHTML += "
  ";
    newTask.id = 'temp' + taskCounter;
    taskCounter++;
    currentContent.appendChild(newTask);
  }
  

  • En el segundo fragmento de código donde se crea el botón y el contenido del div dinámicamente, también debes cambiar la creación de elementos para que sean elementos DOM normales:

  javascript
  function addElement() {
    text = document.getElementById("input").value;
    var newDiv = document.createElement("button");
    newDiv.classList.add("collapsible");
    newDiv.textContent = text;
    newDiv.onclick = selectedColl;
  
  
  var newContentOfDiv = document.createElement("div");
    newContentOfDiv.classList.add("content");
  
  newDiv.id = 'temp' + elementCounter;
    newContentOfDiv.id = 'content' + elementCounterContent;
  
  elementCounter++;
    elementCounterContent++;
  
  document.getElementById("input").value = "";
  
  // Agrega los elementos al cuerpo del documento
    document.body.appendChild(newDiv);
    document.body.appendChild(newContentOfDiv);
  
  // Añade el evento 'click' para expandir el contenido
    newDiv.addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }
  

  Con estos cambios, ahora deberías poder añadir elementos dinámicamente a los cierres seleccionados y mostrar la entrada de los usuarios correctamente. ¡Espero que esta solución te sea útil! Si tienes alguna otra pregunta o duda, no dudes en consultar.

  Respondida el Dec 20, 2020 a las 06:32 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Problema:

  La entrada del usuario no se muestra en el elemento siguienteElementSibling del elemento currentContent.

  Solución:

  La función append() en el código actual agrega el nuevo elemento newTask al final del elemento currentContent. Sin embargo, dado que currentContent es un elemento de tipo "div", no puede contener elementos de tipo "input" o "label".

  Para solucionar esto, necesitas crear un nuevo elemento "div" dentro de currentContent y luego anexar newTask a ese nuevo elemento "div".

  Código actualizado:

  javascript
  function addTask() {
    var text = document.getElementById("taskInput").value;
  
    var newTaskDiv = $("
  ");
    newTaskDiv.append($(""), $("" + text + "
  "));
  
    $(currentContent).append(newTaskDiv);
  }
  

  Explicación:

  Se crea un nuevo elemento "div", newTaskDiv. Se anexan los elementos newTask (entrada y etiqueta) al nuevo elemento "div".

  • El nuevo elemento "div" se anexa al elemento `currentContent`.

  Este código actualizado creará correctamente un nuevo elemento "div" dentro de currentContent y anexará la entrada del usuario como elemento secundario de ese nuevo elemento "div".

  Respondida el Dec 20, 2020 a las 06:40 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---