html - How to style text inserted with innerHTML using JavaScript - Stack Overflow

admin管理员组

文章数量:1405114

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?

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?

• javascript
• html
• css

Share Improve this question Follow asked Jul 29, 2011 at 17:15 D KD K 5,76099 gold badges3232 silver badges4646 bronze badges 6

• 2 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 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 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 Commented Jul 29, 2011 at 17:24
• @Dan : Do you mean mands 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 Commented Jul 29, 2011 at 17:35
• <?php include('myheader.html'); ?> – Amy Groshek Commented Jul 29, 2011 at 17:41

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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/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";

本文标签： htmlHow to style text inserted with innerHTML using JavaScriptStack Overflow