0

tengo un div con un id, dentro de este, hay varios div con otros divs dentro, de modo que muestran los datos como una lista, lo que quiero es añadir un div nuevo, pero si uso .innerHTML+= me lo añade al final de ese div contenedor... necesito que me lo muestre al principio.

he probado con .prepend(etiquetacompleta); y me lo añade al principio pero en plan texto, el dom me lo muestra como texto con "", y no como etiquetas...

function addmedicamento(esteid){
    console.log("añado");


  var valor = "added";
   console.log("texto medicamento: "+valor);

     if (valor == "") {
          console.log("no hay texto");
        return false;
    }
    //si hay texto se añade
    else{
    var dondeseponeunnuevomed=document.getElementById('listadomedic');
    // dondeseponeunnuevomed.innerHTML+="añado "+valor;
    // dondeseponeunnuevomed.prepend("añado "+valor+" | ");
    
    var items = document.getElementsByClassName("medicamento");
    var numerodelid=items.length+1; 
    var etiquetacompleta='  <div id="med'+numerodelid+'" class="row rowunafila bordenaranja">  <div class="col s10 colunafila medicamento">'+valor+'</div> <div class="col s2 colunafilaicon"> <span  class="material-icons borrarmedicamento"onclick="borrareste(this)">close</span>  </div>  </div>';
    // dondeseponeunnuevomed.prepend(etiquetacompleta);
    dondeseponeunnuevomed.innerHTML+=etiquetacompleta;
    }
}
<div id="listadomedic" class="col s12 collistamed disescrolldiag bordeverde">
                                      


<div id="med1" class="row rowunafila bordenaranja">
<div class="col s10 colunafila medicamento">
-a IBUPROFENO (ARGININA) 
</div>
 <div class="col s2 colunafilaicon">
<span  class="material-icons borrarmedicamento"onclick="borrareste(this)">close</span>
</div>                                    
</div>
                                  
<div id="med2" class="row rowunafila bordenaranja">
<div class="col s10 colunafila medicamento">
-b IBUPROFENO (ARGININA) 
</div>
 <div class="col s2 colunafilaicon">
<span  class="material-icons borrarmedicamento"onclick="borrareste(this)">close</span>
</div>                                    
</div>                                  
                                  
</div>

<div class="col s2 colbusquedamedicon">
                                      <span  class="material-icons addmedicamento" onclick="addmedicamento(this)">playlist_add</span>
                                    </div>    

2
  • 1
    Intenta con insertAdjacentHTML()
    – Triby
    el 26 ene. 2022 a las 17:32
  • Gracias!! con esa función me va perfecto (creo que una vez lo intenté utilizar pero me equivocaría en algo y desistí.
    – ebsigma
    el 27 ene. 2022 a las 12:08

1 respuesta 1

0

Para añadir un div nuevo, primero tendrás que crearlo:

let div = document.createElement("div");   

Por lo que describes en tu problema, quieres que tenga determinados atributos. El mecanismo es sencillo:

objeto.atributo = " loquequieras " --> por ejemplo: div.className = "medicamento"

Además, quieres que su id conste de un texto (med) seguido de un número que coincide con los div contenidos en la lista:

let longitud = document.getElementsByClassName("medicamento").length;
div.id = longitud

Y por último, para que te aparezca en la "lista", tendrías que adjuntarlo:

document.getElementById("listadomedic").appendChild(div);
2
  • el problema es que necesito añadir un div como el de mi ejemplo, que tenga varios div con clases, ids y tal que se van creando dinamicamente, por lo que si yo creo el elemento div solo crea un div no me lo crea con las clases ni la información que necesito
    – ebsigma
    el 27 ene. 2022 a las 11:54
  • al final con la información de trivi me funciona como quiero sin complicaciones insertAdjacentHTML() dondeseponeunnuevomed.insertAdjacentHTML('afterbegin', etiquetacompleta);
    – ebsigma
    el 27 ene. 2022 a las 12:03

Tu Respuesta

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

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