Adding HTML Elements Dynamically via JavaScript
A Brief Introduction
As a JavaScript developer, you may come to a point in your life where you’re just plain sick of going and writing HTML. I’ll admit, I love writing in any type of web oriented language, but manually writing out HTML tags can be a serious pain. Today, we’ll see how we can use JavaScript to create the elements in our HTML page so that we don’t have to do it “by hand”, per se.
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
Wait, what’s this? How is there a section titled “The HTML”? Well, we will still need an HTML page to render our elements too, but it will be nothing but the standard boilerplate tags. Here’s what the initial HTML page should look like:
Step 2: The JavaScript
JavaScript has some very helpful functions that we’ll be making heavy use of; .createElement() and.appendChild(). The first is pretty self-explanatory and helps us to create a new element by passing in a DOM element name. The second allows us to insert an element by calling on the parent element that will house the new child element.
We’ll start by first storing a newly created element in a variable. This will help us to call other functions on the element later to add styles and such. Let’s create a new div element and store it in a variable called newDiv:
We can now refer to the newDiv element when we want to manipulate it.
The next step is to use the appendChild() method to place our newly created div into our HTML page. Since we’ve yet to add any elements to the page, we’ll need to call the body element and append our new div to it. Here’s what it looks like in code:
Now, although at this point you can not see the div, if you use your favorite DOM inspection tool to check out the page, you’ll see that we have, in fact, added a new div element to the page. JavaScript is even smart enough to add the closing tags and all!
If this isn’t enough awesomeness for you at once, just know that we can actually manipulate the CSS from here as well. JavaScript also includes a .style attribute that will allow us to change nearly any CSS property we’d like. Let’s go ahead and add some styling to our new div now:
The power of what you’ve seen today is that we are creating and styling elements “on the fly”. I use the term loosely because we’re not actually doing anything dynamic here. However, there’s nothing stopping you from doing any of this within an event handler such as onClick or onMouseOver which would make creating the elements completely dynamic. Join us next time to learn more about traversing the DOM in JavaScript and how knowing how to do it more efficiently can be a huge benefit. See you then!
We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
dynamic DOM elements.zip
As a JavaScript developer, you may come to a point in your life where you’re just plain sick of going and writing HTML. I’ll admit, I love writing in any type of web oriented language, but manually writing out HTML tags can be a serious pain. Today, we’ll see how we can use JavaScript to create the elements in our HTML page so that we don’t have to do it “by hand”, per se.
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
Wait, what’s this? How is there a section titled “The HTML”? Well, we will still need an HTML page to render our elements too, but it will be nothing but the standard boilerplate tags. Here’s what the initial HTML page should look like:
Code Block
Index.html
A simple setup <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Dynamic DOM Elements </title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>
JavaScript has some very helpful functions that we’ll be making heavy use of; .createElement() and.appendChild(). The first is pretty self-explanatory and helps us to create a new element by passing in a DOM element name. The second allows us to insert an element by calling on the parent element that will house the new child element.
We’ll start by first storing a newly created element in a variable. This will help us to call other functions on the element later to add styles and such. Let’s create a new div element and store it in a variable called newDiv:
Code Block
Main.js
Creating a new div element and storing it in a variable.var newDiv = document.createElement('div');
The next step is to use the appendChild() method to place our newly created div into our HTML page. Since we’ve yet to add any elements to the page, we’ll need to call the body element and append our new div to it. Here’s what it looks like in code:
Code Block
main.js
Appending the new div to the body of the page.document.body.appendChild(newDiv);
If this isn’t enough awesomeness for you at once, just know that we can actually manipulate the CSS from here as well. JavaScript also includes a .style attribute that will allow us to change nearly any CSS property we’d like. Let’s go ahead and add some styling to our new div now:
Code Block
main.js
Adding some style to our div element.newDiv.style.width = "500px";
newDiv.style.height = "500px";
newDiv.style.background = "#77a4d4";
newDiv.style.borderStyle = "solid";
newDiv.style.borderWidth = "1px";
As you can see, we’ve given our div some definition now, and you should be able to view the finished product in the browser in all of it’s glory.
A Few Last WordsThe power of what you’ve seen today is that we are creating and styling elements “on the fly”. I use the term loosely because we’re not actually doing anything dynamic here. However, there’s nothing stopping you from doing any of this within an event handler such as onClick or onMouseOver which would make creating the elements completely dynamic. Join us next time to learn more about traversing the DOM in JavaScript and how knowing how to do it more efficiently can be a huge benefit. See you then!
We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
dynamic DOM elements.zip
