You can change an element's attributes (style), insert HTML into the element, or insert/create new elements in specific places.
Changing an Element's Attributes
You can change attributes of specific elements. To change an element's attributes, you first get the element, set it as a variable, and then use the setAttribute method to change its attributes. Here's an example:
//get the element
var contentSubhead = document.getElementById("contentSubhead");
//set an attribute for the element
var .contentSubhead.setAttribute("align","right");
The setAttribute method has two values. You first list the name of the attribute you want to change, and then you list the value.
Applying Styles
You can also apply styles directly to elements. However, because JavaScript doesn't use hyphens or underscores, the CSS style names that are usually hyphenated (like background-color become one word with camel casing: backgroundColor.
To apply an inline style to an element, use the following format:
//set the title ID as a variable
var title = document.getElementByID("title");
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}
Changing the Contents of an Element
To change the actual contents of an element, you use the innerHTML method.
You can see what the inner HTML is for an element by running this console.log message in Firebug:
//set the contentSubhead ID as a variable
var contentSubhead = document.getElementById("contentSubhead");
//see what the inner HTML contains
console.log(contentSubhead.innerHTML);
The preceding statement allows you to view the inner HTML. To change the inner HTML, use a statement such as this:
//set the ID as a variable
var contentSubhead = document.getElementById("contentSubhead");
//change the inner HTML to this new string.
contentSubhead.innerHTML = "The new text for the element...";
Adding New Elements
You can also insert an entirely new element into the DOM. To insert a new element, follow these two steps:
- Create the element.
- Add the new element to the DOM
You create a new element by using the createElement method with the Document object:
//create a new h2 element called sideHead
var sideHead = document.createElement("h2");
Once you create the element, you now need to append it somewhere. To append the new element, use the appendChild method:
//create a new h2 element called sideHead
var sideHead = document.createElement("h2");
//add new inner HTML for sideHead
sideHead.innerHTML = "Did you know?";
//append the sideHead element to the sidebar ID section
document.getElementById("sidebar").appendChild(sideHead);
There's another method for inserting a new element. Rather than creating new innerHTML to insert, you can insert a new text node by using the createTextNode method.
//create a new p element called newSection
var newSection = document.createElement("p");
//create a new text node called pText
var pNewText = document.createTextNode("Did you know?");
//append the new text node on the newSection element
newSection.appendChild(pNewText);
//insert the text node into the newSection section
document.getElementById("sidebar").appendChild(newSection);
This statement will append the newly created text node ("Did you know?") on the newSection paragraph element.