Customizing text appearance with innerHTML in JavaScript: A guide to styling

Question

Customizing text appearance with innerHTML in JavaScript: A guide to styling

Below is the code I have 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 need to use this as the header on around 10 different web pages, but without using <frame> or <iframe>. It's important for graphical reasons.

Currently, I am using

document.getElementById("home").setAttribute("class", "active")

to style the active tab. However, when the header (the block of code above) is inserted into a div using innerHTML, document.getElementById doesn't work and returns null.

Is there a simple method to include the header on multiple pages without <frame> or <iframe>, or to make document.getElementById identify ids inserted with innerHTML?

javascript html css

Answer 1

Answer №1

Combining all the content into a single JavaScript string and ensuring the correct quoting and line breaks are in place to create a valid JavaScript string will allow you to assign it to innerHTML without any issues. The browser will then parse all the tags and generate the HTML for you.

To see this in action, check out this working example: http://jsfiddle.net/jfriend00/QmGvF/.

The JavaScript code executed from the 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";

Answer 2

Combining all the content into a single JavaScript string and ensuring the correct quoting and line breaks are in place to create a valid JavaScript string will allow you to assign it to innerHTML without any issues. The browser will then parse all the tags and generate the HTML for you.

To see this in action, check out this working example: http://jsfiddle.net/jfriend00/QmGvF/.

The JavaScript code executed from the 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";

Customizing text appearance with innerHTML in JavaScript: A guide to styling

Answer №1

Similar questions

How can I keep dragging objects on Raphael JS Freetransform without showing the handles?

Unresponsive CSS styles on a specific DIV element

What causes my slider to speed up with an increase in items and slow down with fewer items in bxslider?

Transforming screen recording video chunks from blob into multipart for transmission via Api as a multipart

Building personalized error messages using graphql-js and express

Develop a distinctive JavaScript solution that enables an image to appear in fullscreen upon loading the page, and then smoothly fade away after precisely

Issues with the CSS in our unique eBay template are creating some challenges

Enhancing Performance of D3 JS for Visualizing Large XML Data

Adding HTML elements to a Vue Tooltip

I'm experiencing an issue where my drum app element does not refresh after performing an action dispatch

If the div is visible in the viewport, then automatically scroll to the top

What methods does Angular use to handle bounded values?

Combine various input data and store it in a variable

I'm having trouble executing the JavaScript function

Issue with accessing container client in Azure Storage JavaScript library

What is the best way to showcase additional fields from a custom post type along with the featured thumbnail feature?

Tips for effortlessly enlarging an element

Bidirectional binding in Angular 2 Custom Directive

Steps for Integrating a Web Service Reference in NodeJS

The validation error occurred with the expectation of a primitive boolean value