How do you clear a <div>s contents with javascript?

Question

I have <div id="editform"></div> . I have certain html currently in it. How do I clear that html and insert completely different html in it?

I tried this but it did not work:

document.getElementById('editform').innerHTML = "";

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: 

block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

Any ideas?

Answer 1

var cell = document.getElementById("cell");

if ( cell.hasChildNodes() )
{
    while ( cell.childNodes.length >= 1 )
    {
        cell.removeChild( cell.firstChild );       
    } 
}

Answer 2

I recommend adding HTML to the div using document.createNode(...) and document.appendChild(...) , instead of adding it as innerHTML. Altering innerHTML tends to be buggy.

Answer 3

Your code works fine for me, as long as you remove (or escape) the line breaks from the new HTML string.

Example: http://jsbin.com/olabo4/

So change this:

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: 

block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

to this:

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

or this:

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: \
\
block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

Answer 4

That should work...maybe the problem is somewhere else?

If you want to remove all of the child nodes, try this:

function removeChildren(obj) {
  while(obj.hasChildNodes()) { obj.removeChild(obj.lastChild); }
};

Call it like this:

removeChildren(document.getElementById('editform')) ;

Answer 5

document.getElementById('editform').innerHTML = ""; 

This should work.

and btw, you don't need to escape " in the string, you can use ' inside the string.

Also, to make your life easier, I would recommend some javascript library like JQuery or Mootools, so that your DOM manipulation is easier and cross browser compatible.