---
title: "JavaScript: Insertion of Elements"
description: "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...."
canonical_url: https://idratherbewriting.com/insertion-of-elements-javascript/index.html
---

> For AI agents: a documentation index is available at https://idratherbewriting.com/llms.txt. Markdown versions of all pages are available by appending .md to any page URL.

# JavaScript: Insertion of Elements

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:

```javascript
//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:

```javascript
//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:

```javascript
//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:

```javascript
//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:

1. Create the element.
2. Add the new element to the DOM

You create a new element by using the `createElement` method with the Document object:

```javascript
//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:

```javascript
//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.

```javascript
//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.