Replace whole element rather than innerHTML?

Question

I can do this:

$('my-panel').innerHTML = '<p> New content </p>';

But if there any way of doing something like

$('my-panel').wholeHTML = "<div id='my-panel'><p> New Content</p></div>";

I can't find any way. If I can't do something like this, I'll have to refactor a whole bunch of stuff, which would be time consuming.

score 6 · Accepted Answer · answered Aug 05 '11 at 19:45

6

What about outerHTML, which includes the 'whole' tag:

$('my-panel').outerHTML = '<p> New content </p>';

answered Aug 05 '11 at 19:45

pimvdb

Huh, that worked. I should have tried that really, thanks. Is there an API listing somewhere for this stuff? The page I was looking at doesn't make any reference to outerHTML. – Oliver Aug 05 '11 at 19:47
@Oliver: I can't find about it on MDN (weird) but MSDN has a good reference: http://msdn.microsoft.com/en-us/library/ms534310(v=vs.85).aspx. – pimvdb Aug 05 '11 at 19:49
Ouch, just looking around a bit, apparently .outerHTML is non-standard and doesn't work on some browsers. – Oliver Aug 05 '11 at 19:52
@Oliver: I wasn't aware of that, but I can confirm it works on the latest versions of Chrome/Safari/Opera/IE. Only Firefox refuses to do something. – pimvdb Aug 05 '11 at 19:54
There seem to be workarounds though, e.g. http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox. – pimvdb Aug 05 '11 at 19:56

score 2 · Answer 2 · answered Aug 05 '11 at 20:41

2

You use mootools, right? you could easily replace the element, i.e.:

Elements.from("<div id='my-panel'><p> New Content</p></div>").replaces($("my-panel"));

answered Aug 05 '11 at 20:41

stecb

score 1 · Answer 3 · answered Aug 05 '11 at 19:46

1

you can always get the tags parentNode and replace his innerHTML

         $('my-panel').parentNode.innerHTML = '<p> New Content</p>'

answered Aug 05 '11 at 19:46

blejzz

2

That would work great except if there are more children of the parent element, in which case they get destroyed. – pimvdb Aug 05 '11 at 19:48
This was what the code was doing before I came to change it. The original writer got around the problem by introducing an extra div just for that purpose, but I hate doing stuff like that. – Oliver Aug 05 '11 at 19:50

3 Answers3