Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
122
rated 0 times [  125] [ 3]  / answers: 1 / hits: 31994  / 14 Years ago, sun, march 21, 2010, 12:00:00

I have HTML page with some HTML element with ID=logo. I need to create JS script (with no external libs calls) that will overwrite that html element with other HTML element like <div id=logo> stuff inside </div>.


More From » html

 Answers
15

Most of the time, it's just the content you want to replace, not the element itself. If you actually replace the element, you'll find that event handlers attached to it are no longer attached (because they were attached to the old one).



Replacing its content



Replacing the element's content is easy:



var element;
element = document.getElementById(logo);
if (element) {
element.innerHTML = -new content-;
}


The innerHTML property has only recently been standardized, but is supported by all major browsers (probably most minor ones, too). (See notes below about innerHTML and alternatives.)



Replacing the element iself



Actually replacing the element itself is a little harder, but not much:



var element, newElement, parent;

// Get the original element
element = document.getElementById(logo);

// Assuming it exists...
if (element) {
// Get its parent
parent = element.parentNode;

// Create the new element
newElement = document.createElement('div');

// Set its ID and content
newElement.id = logo;
newElement.innerHTML = -new content here-;

// Insert the new one in front of the old one (this temporarily
// creates an invalid DOM tree [two elements with the same ID],
// but that's harmless because we're about to fix that).
parent.insertBefore(newElement, element);

// Remove the original
parent.removeChild(element);
}


Notes on innerHTML and other DOM manipulation techiques



There are a number of wrinkles around using innerHTML in certain browsers, mostly around tables and forms. If you can possibly use a library like jQuery, Prototype, etc., I'd do so, as they've got workarounds for those issues built-in.



Alternatively, you can use the various other DOM methods rather than innerHTML (the same ones I used for creating the div and adding/removing, above). Note that in most browsers, doing any significant amount of markup by doing a bunch of createElement, appendChild, etc., calls rather than using innerHTML will be dramatically slower. Parsing HTML into their internal structures and displaying it is fundamentally what browsers do, and so they're highly optimized to do that. When you go through the DOM interface, you're going through a layer built on top of their internal structures and not getting the advantage of their optimizations. Sometimes you have to do it that way, but mostly, innerHTML is your friend.


[#97279] Wednesday, March 17, 2010, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
andreasn

Total Points: 238
Total Questions: 107
Total Answers: 111

Location: Ghana
Member since Sun, Mar 27, 2022
2 Years ago
;