Here we are at our last component of learning JavaScript DOM programming.
- Ask the DOM to find or "select" an HTML element or elements in the rendered page
- Remove the selected element(s) or insert a new element (and / or)
- Adjust a property of the selected element(s)
We've come to understand the DOM and have powerful tools for selecting the right elements. We now want to understand creating new nodes, deleting nodes, and updating nodes' properties.
- Create DOM elements programmatically
- Append elements in the DOM
- Change properties on DOM nodes
- Remove elements from the DOM
Creating an element in JavaScript couldn't be easier. Simply call
document.createElement(tagName)
, where tagName
is the string representation
of any valid HTML tag (e.g., 'p'
, 'div'
, 'span'
, etc.).
Open this lesson's index.html
file in your browser and open up the browser's
console. In the console, enter
var element = document.createElement('div')
The element doesn't show up on the page. What gives?
To get an element to appear in the DOM, we have to append it to an existing DOM
node. To go back to our tree metaphor, we have to glue our new leaf onto a
branch that's already there. We can start as high up on the tree as
document.body
, or we can find a more specific element using any of the
techniques we've learned for traversing the DOM.
Let's append element
to body
to start:
document.body.appendChild(element)
We can continue to update element
, since we have a reference to it:
We can append elements to that element:
var ul = document.createElement('ul')
for (let i = 0; i < 3; i++) {
let li = document.createElement('li')
li.innerHTML = (i + 1).toString()
ul.appendChild(li)
}
element.appendChild(ul)
We can change properties on DOM Nodes to change their appearance.
element.innerHTML = 'Hello, DOM!'
element.style.backgroundColor = '#ff0090';
Ka-bam! You've changed what's on the screen!
Feel free to set as many properties as you'd like — this is a good chance to look around and explore different properties of DOM elements!
Let's adjust the display:
element.style.textAlign = 'center';
ul.style.textAlign = 'left'
That's better!
Now let's remove one of those li
s.
Let's really use the power of querySelector
and method chaining.
The removeChild()
method requires us to find a parent and tell it to remove
its already-found child:
ul.removeChild(ul.querySelector('li:nth-child(2)'))
Boom. Second element is gone.
What if we want to remove the whole unordered list (ul
)?
We can just call remove()
on the element itself:
ul.remove()
And it's gone!
In this lab you must edit the included index.js
file.
- Remove the
main
element. - Add an H1 with
id
ofvictory
programmatically, using JavaScript. Inside the tag you should put "(your name) is the champion!"
Inside index.js
, you'll see JavaScript comments telling you where to put the
code. Run the tests with learn
. When they pass, use learn submit
to move
on! Congratulations.
We learned how to create, append and remove elements in the DOM with JavaScript. What's amazing about this is that you now understand "DOM programming with JavaScript."
You can:
- Ask the DOM to find or "select" an HTML element or elements in the rendered page
- Remove the selected element(s) or insert a new element (and / or)
- Adjust a property of the selected element(s)
To create even richer experiences we can build on this foundation by:
- Learning more about (cue the trumpets) The JavaScript Programming Language
- Learning to set events that trigger DOM manipulation behavior.
As a taste of what lies ahead, open a new tab and try pasting this into the
DevTools Console and pressing Enter. You might have to scroll, but you should
see the contents of myName
on the page, cycling through colors!
let myName = "Byron the Poodle";
let colors = [
"red", "orange", "yellow",
"blue", "green", "indigo",
"violet"
];
let updateFrequency = 500;
let body = document.getElementsByTagName("body")[0];
let currColor = colors[0];
let colorPost = 0;
let newHeader = document.createElement("h1");
newHeader.innerText = myName;
body.appendChild(newHeader);
setInterval( function() {
if (colorPost > colors.length) {
colorPost = 0;
}
newHeader.style.color = colors[colorPost];
colorPost++;
}, updateFrequency);
You should be able to grasp what's going on here and even be able to make some fun edits! Good luck on your continued exploration of JavaScript!