javascript substitute DOM element

Question

I would like to do something like:

var htmlcode = '<div>testing</div>';
document.getElementById('initDiv').html = htmlcode;

kinda like using innerHTML but replacing the element itself.

Can someone help me please? thanks

• David Thomas: Replacing what element? What's your html mark-up?
• Pastilhas: my question is very simple. but my html markup would be <div id="initDiv">blablabla</div> please don't tell me i can use innerHTML because i know i could, that is not my question. thanks
• David Thomas: Do you need to create the element inside of the htmlcode variable? Or would you be willing to use document.createElement()?
• Pastilhas: I would rather do: var htmlcode = '<div>testing</div>'; parent.createElement(htmlcode); parent.removeElement(original); - something like that

Answer 1

No, there's no native cross-browser solution to your problem. The best you could do would be to piece together something that will work in a more cross-browser manner.

Here's one solution:

function outerHTML( el, html ) {
 if ( 'outerHTML' in el ) { // for most browsers
 el.outerHTML = html;
 } else { // for Firefox
 var temp = document.createElement('div');
 temp.innerHTML = html;
 while (temp.firstChild) {
 el.parentNode.insertBefore( temp.firstChild, el );
 }
 el.parentNode.removeChild(el);
 }
};

Use it like this:

var initDiv = document.getElementById('initDiv');
outerHTML( initDiv, '<div>testing</div>' );

Example: http://jsfiddle.net/6VUNU/1/

Answer 2

There is a document.getElementById(...).outerHTML value that you can use, but as far as I remember it's not usable in all browsers.

Answer 3

You can always find initDiv's parent, createElement('div'), populate it with htmlcode, and then removeElement on the initDiv.

• Pastilhas: that's a good idea, but i would think there would be something focused on this...
• SeanCannon: Once the node is gone, it's gone. If it's simply a div you can just change out the innerHTML and it will appear as a new div to the user. If you're getting complicated with DOM manipulation for a game or something, you might want to check out jQuery as it makes all these actions very simple and cross-browser friendly.
• Pastilhas: i appreciate it, but this is for a very specific academic project, i can't use any external libraries. @patrick dw's answer really suits my needs...