innerHTML

[bennyboywonder]

in my javascript I am using innerHTML a lot to write the html to a page, but it is not behaving as it should. When I write a <div> tag for example, it seems to want to put the closing tag straight afterwards in the same statement whether or not this is what I have asked for. for example with

innerHTML += "<div id=\"budget\">";
innerHTML += "<div class='spacer'> </div>";
innerHTML += "<div class='clearCell'>Jan</div>";
innerHTML += "<div class='clearCell'>Feb</div>";
innerHTML += "</div>";

 

the first innerHTML statement seems to come out as

<div id="budget"></div>

 

despite me not putting the closing tag in there. Is there something I am missing here? any way of preventing this? it is driving me fricking crazy and messing up my layout...

[fenway]

Of course it does... you asked it to write out HTML -- and in HTML, DIVs have closing tags.  The "correct" way to do this is to build a string first in JS, and then only set .innerHTML _once_, at the end, when you're "written" all of your code.  But you should never really use .innerHTML, because there are proper DOM functions to do this without tell the browser what to do and how to do it.

[bennyboywonder]

Ok, could you elaborate on that? what should I use instead?

Of course it does... you asked it to write out HTML -- and in HTML, DIVs have closing tags.  The "correct" way to do this is to build a string first in JS, and then only set .innerHTML _once_, at the end, when you're "written" all of your code.  But you should never really use .innerHTML, because there are proper DOM functions to do this without tell the browser what to do and how to do it.

[nloding]

As for the answer to DOM vs. innerHTML ... I use both, depending on what it is.  Here's an article about it that helped me a lot, and it's got a great link to some benchmarks by quirksmode.  innerHTML beats the pants off the DOM way, but the DOM was is W3C compliant, innerHTML is proprietary M$ that other browsers included.

 

http://slayeroffice.com/articles/innerHTML_alternatives/

 

Anyhow, what fenway was saying was this:

 

var string = "";

string +="<div>";
string +="<div id=\"anotherdiv\">stuff here</div>";
string +="<div id=\"anotherdiv2\">stuff here</div>";
string +="</div>";

//assuming you've using document.getElementById earlier as "element"
element.innerHTML = string;

 

Don't repeatedly use .innerHTML ... use a string, then make .innerHTML = that string.

[davestewart]

innerHTML is just so quick to develop with.

 

Think about it: you write HTML that the browser has to parse and display anyway, so why shouldn't it have a problem with some more HTML that you've written?

 

As the last user said, the only reason you may not use innerHTML is because some browsers don't support it. But then some browsers don't support DOM functionality anyway, so make your own decision.

 

If I have to create large node structures DOM functions can be a real headache, and about 10 times as much code.

[fenway]

I generally use .innerHTML too -- but just be away that you're forcing the browser to re-parse, which is the slow part.