0

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

asked Jul 3, 2011 at 17:14
4
  • Replacing what element? What's your html mark-up? Commented Jul 3, 2011 at 17:17
  • 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 Commented Jul 3, 2011 at 17:20
  • Do you need to create the element inside of the htmlcode variable? Or would you be willing to use document.createElement()? Commented Jul 3, 2011 at 17:27
  • I would rather do: var htmlcode = '<div>testing</div>'; parent.createElement(htmlcode); parent.removeElement(original); - something like that Commented Jul 3, 2011 at 17:40

3 Answers 3

4

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/

answered Jul 3, 2011 at 17:40
Sign up to request clarification or add additional context in comments.

Comments

1

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

answered Jul 3, 2011 at 17:17

Comments

1

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

answered Jul 3, 2011 at 17:21

3 Comments

that's a good idea, but i would think there would be something focused on this...
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.
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...

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.