3

quiero crear un div con una id que vaya variando mediante un contador dentro de una división ya creada dentro del cuerpo de mi html. Se trata de un botón que va creando tareas dentro de un div pero solo las crea dentro del body al hacer appenChild().

Es decir al obtener el elemento del dom del div de mi página falla. Como os digo document.division.appendChild(divNota) falla, pero si añado document.body.appendChild(divNota) funcionaría perfectamente añadiendo la división al body. Quería añadir la nota dentro del div division.

Muchas gracias.


var contador=0;

alert(contador);

function creartag(){

    var contenido = prompt("Añade la nota:","");

     alert(contador);
      contador++;
    alert(contador);
    var iddd ="tarea"+contador;

    alert(iddd);

    var divNota = document.createElement("div");
    divNota.setAttribute("id",iddd);
    divNota.setAttribute("class","tags");


    var division = document.getElementById(division_bloque_principal_sesion_iniciada);

    document.division.appendChild(divNota); 


    divNota.innerHTML = contenido;

  }






2
  • 3
    document.division? Solo debería ser division.appendChild(myDiv) el 6 dic. 2019 a las 10:23
  • 1
    Tras probar un rato di con el fallo, muchas gracias! el 6 dic. 2019 a las 13:18

1 respuesta 1

3

Como bien dice @RimuruTempest, estás referenciando mal el elemento al usar de nuevo document.

Además de eso, me permito algunas recomendaciones de optimización y de seguridad:

  1. Es mejor crear la refencia division fuera de la función, de lo contrario estarías molestando al document cada vez para lo mismo.
  2. Yo evitaría usar ids tan largossss como division_bloque_principal_sesion_iniciada
  3. Quiero llamar la atención sobre una nota sobre la seguridad en MDN con respecto al uso de innerHTML. Advierte que el uso de innerHTML puede ser una puerta abierta a ataques de cross-site scripting. Haciendo caso a esa nota, es preferible usar Node.textContent, es más seguro y más rápido. El código más abajo lo usa.

    Cuando solo tratamos con texto, es recomendable no usar innerHTML, sino Node.textContent, que no interpretará la cadena pasada como HTML, sino como texto plano.

var contador = 0;
//alert(contador);
  var division = document.getElementById("division_bloque_principal_sesion_iniciada");


function creartag() {
  var contenido = prompt("Añade la nota:", "");
  //alert(contador);
  contador++;
  //alert(contador);
  var iddd = "tarea" + contador;
  //alert(iddd);
  var divNota = document.createElement("div");
  divNota.setAttribute("id", iddd);
  divNota.setAttribute("class", "tags");
  division.appendChild(divNota);
  divNota.textContent = contenido;

}
<div id="division_bloque_principal_sesion_iniciada"></div>
<button onclick="creartag()">Crear</button>

1
  • 1
    Muchisimas gracias, aplicare los consejos con mucho gusto el 6 dic. 2019 a las 13:21

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.