Creating dynamic div using 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>

How to create a new div and add contents to it?In the above case i lost previous content due to innerHTML.I want new div each time for dynamically attach an image and the above variable val to it. The desired and current output demonstrated here

Thanks in advance.

• bgs: possible duplicate of Javascript: How to create new div dynamically, change it, move it, modify it in every way possible?

Answer 1

Check this 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++;
 }
};

• Anoop: hi 1 hi 1 hi 3 hi 1 hi 3 hi 4 Hi i got ouput like this.First time i got hi 1,Next time i got hi1,hi3.etc.Previous value got appended
• Voonic: @Anoop you want to remove previous one ?

Answer 2

Look at document.createElement() and element.appendChild().

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

---

Because you will likely encounter this in the near future: You can remove any element with this code:

element.parentNode.removeChild(element);

Answer 3

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

Full version using cloneNode (faster) and 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 4

Syntax for dynamic create div:

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