Creazione div dinamica utilizzando JavaScript

<script> 
    function selecteditems() 
    { 

    var i=1; 
    var val=""; 
    while(i<=53) 
    { 

     if(document.getElementById('timedrpact'+i)!="") 
     { 
      val+=document.getElementById('timedrpact'+i).value; 
      document.getElementById('showselecteditems').innerHTML=val; 
      } 
     i++; 
     } 

    } 
    </script>

Come creare un nuovo div e aggiungere contenuti ad esso? Nel caso di cui sopra ho perso contenuto precedente a causa di innerHTML.I voler nuova div ogni volta per collegare in modo dinamico l'immagine e la variabile sopra val. The desired and current output demonstrated here Creazione div dinamica utilizzando JavaScript

Grazie in anticipo.

fonte

2013-10-21 Anoop

possibile duplicato di [Javascript: come creare un nuovo div in modo dinamico, modificarlo, spostarlo, modificarlo in ogni modo possibile?] (Http://stackoverflow.com/questions/14094697/javascript-how-to- creare-new-div-dinamico-cambio-da-move-it-modifica-it-in) – bgs

Controlla questo Demo

<div id="output" class="out"> 

</div> 

window.onload=function(){ 
    var output = document.getElementById('output'); 
    var i=1; 
    var val=""; 
    while(i<=3) 
    { 

     if(!document.getElementById('timedrpact'+i)) 
     { 
      var ele = document.createElement("div"); 
      ele.setAttribute("id","timedrpact"+i); 
      ele.setAttribute("class","inner"); 
      ele.innerHTML="hi "+i; 
      output.appendChild(ele); 

     } 
     i++; 


    } 
};

fonte

2013-10-21 12:35:01 Shadow

hi hi 1 hi hi 3 hi hi 3 Ciao ho ottenuto ouput come this.First tempo ho ottenuto hi 1, la prossima volta ho hi1, hi3.etc.Il valore precedente è stato aggiunto – Anoop

@Anoop vuoi rimuovere quello precedente? – Shadow

Utilizzando createElement:

function selecteditems() { 
    var container = document.getElementById('showselecteditems'); 
    for (var i=1;i<=53;i++) { 
    var fld = document.getElementById('timedrpact'+i); 
    if (fld) { 
     var div = document.createElement("div"); 
     div.appendChild(document.createTextNode(fld.value)); 
     container.appendChild(div); 
    } 
    } 
}

versione completa utilizzando cloneNode (più veloce) e eventBubbling

Live Demo

var div = document.createElement("div"); 
var lnk = document.createElement("a"); 
var img = document.createElement("img") 
img.className="remove"; 
img.src = "https://uperform.sc.gov/ucontent/e14c3ba6e4e34d5e95953e6d16c30352_en-US/wi/xhtml/static/noteicon_7.png"; 
lnk.appendChild(img); 
div.appendChild(lnk); 
function getInputs() { 
    var container = document.getElementById('showselecteditems'); 
    for (var i=1;i<=5;i++) { 
    var fld = document.getElementById('timedrpact'+i); 
    if (fld) { 
     var newDiv = div.cloneNode(true); 
     newDiv.getElementsByTagName("a")[0].appendChild(document.createTextNode(fld.value)); 
     container.appendChild(newDiv); 
    } 
    } 
}  
window.onload=function() { 
    document.getElementById('showselecteditems').onclick = function(e) { 
    e=e||event; 
    var target = e.target||e.srcElement; 
    // target is the element that has been clicked 
    if (target && target.className=='remove') { 
     parentDiv = target.parentNode.parentNode; 
     parentDiv.parentNode.removeChild(parentDiv); 
     return false; // stop event from bubbling elsewhere 
    } 
    }  
    getInputs(); 
}

fonte

2013-10-21 12:24:23 mplungjan

Guardate document.createElement() e element.appendChild().

var newdiv = document.createElement("div"); 
newdiv.innerHTML = val; 
document.getElementById("showselecteditems").appendChild(newdiv);

perché probabilmente incontrare questo nel prossimo futuro: È possibile rimuovere qualsiasi element con questo codice:

element.parentNode.removeChild(element);

fonte

2013-10-21 12:24:42

Sintassi per dinamica div creare:

DivId = document.createElement('div'); 
    DivId.innerHtml ="text"

fonte

2013-10-21 12:25:10 bgs

Creazione div dinamica utilizzando JavaScript

risposta

Problemi correlati