use dom to change body id tag

Posted on 2006-11-27
Last Modified: 2013-11-19
Hey folks,

I've got a simple gallery page which currently uses getAttribute and getElementById to take the [link] title text and place it into an id [description]. Yes, I lifted this code from the Friends of Ed book.

My goal is, when the user clicks a link, to show "active" state by changing the body ID text to whatever is the link title text (in combination with a little cascading ID selector action). I'm honestly not even sure this will work. If someone else has an more practical idea, I'm open. I just think it would be cool to be able to ID the active link without the page having to reload.

Right now, the description.firstChild.nodeValue = text; literally replaces the body id with text, which simply appears on the page.

Anyhow, any help or ideas are greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""">
<html xmlns="" xml:lang="en">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <script type="text/javascript">
   function showPic(whichpic) {
        var source = whichpic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        var text = whichpic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;

<body id="description">

    <li id="fireworks"><a href="images/fireworks.jpg" id="linkfireworks" title="fireworks" onclick="showPic(this); return false;">Fireworks</a></li>
    <li id="coffee"><a href="images/coffee.jpg" id="linkcoffee" title="coffee" onclick="showPic(this); return false;">Coffee</a></li>
    <li id="rose"><a href="images/rose.jpg" id="linkrose" title="rose" onclick="showPic(this); return false;">Rose</a></li>
    <li id="bigben"><a href="images/bigben.jpg" id="linkbigben" title="bigben" onclick="showPic(this); return false;">Big Ben</a></li>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
Question by:mullagatawny
  • 4
  • 2
  • 2
LVL 23

Expert Comment

ID: 18025283

Author Comment

ID: 18025298
Hi R.A,

Thanks for the note. I try not to use IFRAMES when I can help it. Unless, of course you are referring to another point on this page? In this example, the onclick=showPic(this); works well as far as swapping the images without refreshing the page.

- Sa

Expert Comment

ID: 18026135
Here's how to change the body tag's ID: = "foo";

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.


Expert Comment

ID: 18026141
Btw, I'm not quite sure how rama_krishna580's link can help you, it seems totally unrelated to the question.
LVL 23

Expert Comment

ID: 18028348
@aescnt ; >>>> it seems totally unrelated to the question
did you read the whole article...?
anyway i will go with asker, its his/her final choice to choose the correct answer.

it is EE's policy to let the question asker pick the most helpful solution, but I beileve experts are also obliged to understand the problem, and post helpful comments. (


Expert Comment

ID: 18028545
Rama Krishna: Yes, I did... and I don't think the question has anything to do with AJAX, or asynchronous calls via IFrame, or cookies, or PHP. I did find a small line buried in the code that goes " = 'remotingDiv'" which is similar to the solution I proposed, although it's used on a dynamically created element, and wasn't pointed out by the article, or you.

I also tried understood the asker's problem to the best of my ability, and tried to be helpful by posting a straight-forward response.

Author Comment

ID: 18028998
Just to defuse, I appreciate any attempt, from any user, regardless of it's usefullness. It really comes down to how well I pose my question. In this case, I still do not have the answer I am looking for, although I appreciate the reference as to how to identify the body id using DOM.

Regarding = "foo"; do either of you know how I may replace "foo" dynamically using the following?

var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;

--> = "foo";


Accepted Solution

aescnt earned 350 total points
ID: 18029040
First of all I apologize if I came of harsh on my comments. Anyway, are you trying to change the ID of `description`? if so then it's: = text;

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adding Row and Cell on a table 14 25
jquery datable hidden section doesn't submit 2 15
Html Table looping 4 25
Find closest specified item from present item - Javascript 5 33
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question