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.

Voonic · Accepted Answer · 2013-10-21 12:35:01Z

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, 2013 at 12:35

Voonic

4,7733 gold badges29 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anoop Over a year ago

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 Over a year ago

@Anoop you want to remove previous one ?

Cobra_Fast · Accepted Answer · 2013-10-21 12:24:42Z

5

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

answered Oct 21, 2013 at 12:24

Cobra_Fast

16.2k8 gold badges65 silver badges106 bronze badges

Comments

mplungjan · Accepted Answer · 2013-10-21 12:52:41Z

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

bgs · Accepted Answer · 2013-10-21 12:25:10Z

0

Syntax for dynamic create div:

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

answered Oct 21, 2013 at 12:25

bgs

3,2537 gold badges43 silver badges59 bronze badges

Collectives™ on Stack Overflow

Creating dynamic div using javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Collectives™ on Stack Overflow

Creating dynamic div using javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest