tworzenia dynamicznych div przy użyciu javascript

Question

<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> 

Jak utworzyć nowy div i dodać zawartość do niego? W powyższym przypadku straciłem poprzednią zawartość powodu innerHTML.I chcą nowego div każdym razem dynamicznie dołączyć zdjęcie i powyższej zmiennej val to it.

Z góry dziękuję.

Answer 1

Sprawdź to 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++; 


    } 
}; 

Answer 2

Korzystanie 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); 
    } 
    } 
} 

Pełna wersja za pomocą cloneNode (szybciej) i 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(); 
}  

Answer 3

spojrzeć na document.createElement() i element.appendChild().

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

---

Ponieważ będzie prawdopodobnie spotkanie to w niedalekiej przyszłości: Można usunąć element z tym kodem:

element.parentNode.removeChild(element); 

Answer 4

składnia dla dynamicznego tworzenia Gr:

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