7

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>".

1
  • i'm sorry - 'no external libs calls' means ? you don't want to reference code on another site? or have you ruled out using the obvious solution to this - jQuery- included and loaded from your own server? Commented Mar 21, 2010 at 14:44

3 Answers 3

20

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.

Sign up to request clarification or add additional context in comments.

6 Comments

I realized my mistake a second after posting...so deleted it...but you beat me to downvoting it...how unfortunate...good answer though. Never thought of doing this myself. Thanks.
@Muhammad: You're assuming I was the one downvoting; just because i commented it doesn't mean I downvoted. Normally, I'd comment, then downvote several minutes later if the answer hadn't been corrected or removed. But it happens you're right on this occasion -- for some reason I downvoted right away. I don't know why (and can't undo it now, as the answer's been deleted).
I strongly encourage you to 'actually replace the element itself'. Using innerHTML is convenient sometimes, but can also be a vulnerability other times. So if this is your first DOM-adventure, I encourage you to do it the long way at least this once.
Also take note that in IE6, there are certain elements that cannot be modified with innerHTML, most notably tables.
@WishCow: I did note that in my answer ("There are a number of wrinkles...")
|
0

Do you really need to 'replace' the element or can you just toggle its visibility? This is a technique that's much simpler and will be more efficient. Most importantly it keeps the content (html) separated from the behavior (javascript).

function toggle() {
    document.getElementById("logo").style.display="none";
    document.getElementById("element_to_show").style.display="block";
}

see T.J.'s answer if you actually want to replace the element.

Comments

0

Do you really need to 'replace' the element or can you just toggle its visibility? This is a technique that's much simpler and will be more efficient. Most importantly it keeps the content (html) separated from the behavior (javascript).

2 Comments

This is rather a comment, not an answer.
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Your Answer

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.