If people recommend I shouldn't use .innerHTML, what then should I instead use? [duplicate]

This question already has answers here: Closed 11 years ago. 开发者_如何学Python

Possible Duplicate:

JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?

What should I use instead of .innerHTML? All advice is appreciated.

---

The correct answer is that in certain situations you should use innerHTML, and in other situations you should use appendChild. Here's when to use innerHTML or appendChild:

• Use innerHTML when you're setting text inside of an HTML tag like an anchor tag, paragraph tag, span, div, or textarea.

• Use appendChild() If you're trying to add new DOM elements inside of another DOM element.

---

Without any context, there is only one rule: there are no rules.

There are no situations in programming where one follows some "rule" blindly, regardless of the context. If innerHTML were inherently eval, I mean evil, it wouldn't be in the language specification to begin with!

The alternatives to using innerHTML vary depending on what you are trying to do, what (if any) javascript libraries you have, and what (if any) browsers you are targeting.

When you're creating a new section of HTML, you can use document.createElement (docs) to make each element, using appendChild and the like to add elements to one another. If you're changing the text of an element from "blue" to "red", you'd use innerHTML to accomplish that (assuming you don't use any of the popular javascript frameworks).

---

You can use W3C compliant methods, like:

• createElement()^[docs]
• appendChild()^[docs]
• removeChild()^[docs]
• replaceChild()^[docs]
• insertBefore()^[docs]
• createTextNode()^[docs]

---

When practical, it's better to create the DOM objects yourself and add them to the DOM tree—performance will be better. For complex elements, it's probably better to use innerHTML or otherwise you'll have unmaintainable code.

---

Just like the answer here, "use an API". jQuery is way better at this than you and its extremely easy to use, so just use that.

Looks like no one wants to click through so i'll quote the answer.

Neither. Use a library like jQuery, Prototype, Dojo or mooTools because both of these methods are fraught with trouble:

• Did you know that innerHTML on tables for IE is readonly?
• Did you know for the select element it's broken as well?
• How about problems with createElement?

The writers of the major javascript libraries have spent a lot of time and have entire bug tracking systems to make sure that when you call their DOM modifying tools they actually work.

If you're writing a library to compete with the above tools (and good luck to you if you are), then I'd choose the method based on performance, and innerHTML has always won out in the past, and since innerHTML is a native method, it's a safe bet it will remain the fastest.

The key takeaway here is that DOM manipulation done right is a sufficiently complex task to really make one look strongly at using a library to abstract away the headaches you may encounter.

---

You should exchange objects (JSON or XML) instead of pure HTML between AJAX requests. Then, you need a presentation logic on your client to handle the data (JSON or XML) and update the DOM accordingly.