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.

possible duplicate of [Javascript: How to create new div dynamically, change it, move it, modify it in every way possible?](http://stackoverflow.com/questions/14094697/javascript-how-to-create-new-div-dynamically-change-it-move-it-modify-it-in) — bgs, Oct 21 '13 at 12:27

score 8 · Accepted Answer · answered Oct 21 '13 at 12:35

8

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


    }
};

answered Oct 21 '13 at 12:35

Voonic

4,667
3
27
58

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 – Anoop Oct 21 '13 at 12:51
@Anoop you want to remove previous one ? – Voonic Oct 21 '13 at 13:03

score 5 · Answer 2 · answered Oct 21 '13 at 12:24

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

mplungjan · Answer 3 · 2013-10-21T12:52:41.507

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

score 0 · Answer 4 · answered Oct 21 '13 at 12:25

0

Syntax for dynamic create div:

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

answered Oct 21 '13 at 12:25

bgs

3,061
7
40
58

Creating dynamic div using javascript

4 Answers4

Linked