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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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";

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.


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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to implement server side field validation and display customized error messages to the client.
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 look for a specific file type in a local or remote server directory using PHP.

737 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