How to style text inserted with innerHTML using JavaScript

Question

I have the following code for a header:

<div id="title-text">
    The Cuttlefisher Paradise
</div>
<div id="choices">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="contact"><a href="#">Contact</a></li>
        <li id="about"><a href="#">About</a></li>
        <!-- 5 more items -->
    </ul>
</div>

I want this to be the header about 10 different web pages. I cannot use <frame> or <iframe> for graphical reasons.

For an example of what I want to do, I am currently using document.getElementById("home").setAttribute("class", "active") to style the active tab, but when the header (the block of code just above) is inserted into a div using innerHTML, document.getElementById does not work (returns null).

What simple method is there to either put the header (without <frame> or <iframe>) on multiple pages or get document.getElementById to find ids inserted with innerHTML?

as far as I know it will; however, you are trying to clone a node with it's unique id. Only one element in a document may have a particular id, and if you need several to have the same identifying handle, use a class instead. This may be your problem, but idk. — Joseph Marikle
– Joseph Marikle, Commented Jul 29, 2011 at 17:20
Why don't you insert them using the DOM instead then? It will allow you to use .getElementById. — Dan
– Dan, Commented Jul 29, 2011 at 17:21
Are you using a server-side language such as PHP? You should be including the menu on each page using server-side code. — thirtydot
– thirtydot, Commented Jul 29, 2011 at 17:24
@Dan : Do you mean commands like createElement? I don't want to manually have to constuct the unordered list with lots of JavaScript. That sounds like it might end up being a very messy mix of HTML and JavaScript. @thirtydot : I preferably want to just use HTML, JavaScript, and CSS for this. — D K
– D K, Commented Jul 29, 2011 at 17:35

jfriend00 · Accepted Answer · 2011-07-29 18:06:15Z

4

If you put all that content into a single javascript string and get all the quoting and line breaks right to make it a legal javascript string, then there should be no problem assigning it to innerHTML and the browser will parse all the tags and create the HTML for you.

You can see it work here: http://jsfiddle.net/jfriend00/QmGvF/.

Javascript code called from page ready handler:

var newHTML = '<div id="title-text"> \
    The Cuttlefisher Paradise \
</div> \
<div id="choices"> \
    <ul> \
        <li id="home"><a href="#">Home</a></li> \
        <li id="contact"><a href="#">Contact</a></li> \
        <li id="about"><a href="#">About</a></li> \
        <!-- 5 more items --> \
    </ul> \
</div>';

document.getElementById("top").innerHTML = newHTML;

var home = document.getElementById("home");
home.style.backgroundColor = "#FF0000";

edited Jul 29, 2011 at 18:06

answered Jul 29, 2011 at 17:51

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

4 Comments

D K Over a year ago

It creates the HTML for me no problem, but getElementById doesn't work on any of the newly inserted elements.

jfriend00 Over a year ago

See the updated jsFiddle. I'm able to retrieve the "home" ID and set an attribute on it just fine. There must be something else going on with your code/HTML.

D K Over a year ago

My problem ended up being that I was setting the class name for an id that didn't exist (i.e. I took away a menu button but left the styling for it). Thank you for showing me how to use .className (I had no clue that it exists).

jfriend00 Over a year ago

Cool, glad you got it figured.

Collectives™ on Stack Overflow

How to style text inserted with innerHTML using JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related