Servage Magazine

Inner HTML gives us a simple method for accessing and changing the text and markup inside an element. It behaves differently from the methods we’ve covered so far. Let’s say we need a quick way of adding a paragraph of text to the first element on our page with a class of intro:

var introDiv = document.getElementsByClassName("intro");
introDiv.innerHTML = "<p>This is our intro text</p>";

The second statement here adds the content of the string to introDiv (an element with the class value “intro”) as a real live element because innerHTML tells JavaScript to parse the strings “<p>” and “</p>” as markup.

style

The DOM also allows you to add, modify, or remove a CSS style from an element using the style property. It works similarly to applying a style with the inline style attribute. The individual CSS properties are available as properties of the style property. I bet you can figure out what these statements are doing using your new CSS and DOM know-how:

document.getElementById("intro").style.color = "#fff";
document.getElementById("intro").style.backgroundColor = "#f58220";
//orange

In JavaScript and the DOM, property names that are hyphenated in CSS (such as background-color and border-top-width) become camel case (backgroundColor and borderTopWidth, respectively) so the – character isn’t mistaken for an operator.

In the examples you’ve just seen, the style property is used to set the styles for the node. It can also be used to get a style value for use elsewhere in the script. This statement gets the background color of the #intro element and assigns it to the brandColor variable:

var brandColor = document.getElementById("intro").style.backgroundColor;

Adding and removing elements

So far, we’ve seen examples of getting and setting nodes in the existing document. The DOM also allows developers to change the document structure itself by adding and removing nodes on the fly. We’ll start out by creating new nodes, which is fairly straightforward, and then we’ll see how we add the nodes we’ve created to the page. The methods shown here are more surgical and precise than adding content with innerHTML. While we’re at it, we’ll remove nodes, too.

createElement()

To create a new element, use the aptly named createElement() method. This function accepts a single argument: the element to be created. Using this method is a little counterintuitive at first because the new element doesn’t appear on the page right away. Once we create an element in this way, that new element remains floating in the JavaScript ether until we add it to the document. Think of it as creating a reference to a new element that lives purely in memory—something that we can manipulate in JavaScript as we see fit, then add to the page once we’re ready.

var newDiv = document.createElement("div");
createTextNode()

If we want to enter text into either an element we’ve created or an existing element on the page, we can call the createTextNode() method. To use it, provide a string of text as an argument, and the method creates a DOMfriendly version of that text, ready for inclusion on the page. Much like createElement, this creates a reference to the new text node that we can store in a variable and add to the page when the time comes.

var ourText = document.createTextNode("This is our text.");
appendChild()

So we’ve created a new element and a new string of text, but how do we make them part of the document? Enter the appendChild method. This method takes a single argument: the node you want to add to the DOM.

You call it on the existing element that will be its parent in the document structure. Time for an example.

Here we have a simple div on the page with the id “our-div”:

<div id="our-div"></div>

Let’s say we want to add a paragraph to #our-div that contains the text “Hello, world”. We start by creating the p element (document.createElement()) as well as a text node for the content that will go inside it (create-TextNode()).

var ourDiv = document.getElementById("our-div");
var newParagraph = document.createElement("p");
var copy = document.createTextNode("Hello, world!");

Now we have our element and some text, and we can use appendChild() to put the pieces together.

newParagraph.appendChild( copy );
ourDiv.appendChild( newParagraph );

The first statement appends copy (that’s our “Hello, world” text node) to the new paragraph we created (newParagraph), so now that element has some content. The second line appends the newParagraph to the original div (ourDiv). Now ourDiv isn’t sitting there all empty in the DOM, and it will display on the page with the content “Hello, world.”