Locked lesson.

Upgrade

About this lesson

Adding new nodes on the fly with JavaScript.

Exercise files

Download this lesson’s related exercise files.

Creating New Nodes.docx
59.1 KB Creating New Nodes - Solution.docx
59.7 KB

Quick reference

Creating New Nodes

Creating new nodes is a two-step process.

When to use

Any time you want to create a new node, use one of these two methods.

Instructions

To create a new node after another node, use .appendChild:

<div id="myDiv">
    <p id="first">This is my text...</p>
</div>

<script>
    var newP = document.createElement("p");
    var newNode = document.createTextNode("This is new text!");

    newp.appendChild(newNode);

    var myElement = document.getElementById("myDiv");
    myElement.appendChild(newp);    
</script>

 

To create a new node and put it before another node, use .insertBefore:

<div id="myDiv">
    <p id="first">This is my text...</p>
</div>

<script>
    var newP = document.createElement("p");
    var newNode = document.createTextNode("This is new text!");

    newp.appendChild(newNode);

    var myElement = document.getElementById("myDiv");
    var myChild = document.getElementById("first");
    myElement.insertBefore(newP, myChild);

</script>

Hints & tips

  • Adding new nodes is just another way to manipulate HTML elements
  • Adding new nodes is a two-step process
Login to download
  • 00:04 In the last video, we looked at nodes and we looked at navigating the node tree.
  • 00:08 In this video, I wanna talk about creating new nodes.
  • 00:11 So we know that a node is basically just an HTML element, and
  • 00:15 we've created new HTML elements with JavaScript in past videos.
  • 00:19 So this is basically just another way to do that.
  • 00:21 And you'll often find, like I said in the last video,
  • 00:23 there's lots of different ways to do different things in JavaScript.
  • 00:26 And it's really just a matter of your personal preference.
  • 00:28 But sometimes, for whatever reason, one way might be better than another just for
  • 00:33 your circumstance, just the code requires one way or another for many,
  • 00:37 many different reasons.
  • 00:37 So anyway, to create a new node it's a two step process.
  • 00:40 First, we create the new element and then we add it into the HTML document.
  • 00:45 So let's go ahead and look at our trusty p tag here.
  • 00:47 And first, let's wrap it in a div and
  • 00:50 give that an id of myDiv, don't really matter.
  • 01:00 Indent that to make it look nice.
  • 01:02 Now let's do some JavaScript here.
  • 01:03 So just gonna paste this in and then we can take a look at it.
  • 01:08 Tab this all over, okay, so like I mentioned this is a two step process.
  • 01:11 First, we create a p, that's right here.
  • 01:16 Creating a variable, we're saying document create element of p.
  • 01:20 And then we put the text that we want inside the p, and
  • 01:24 that's what this document.createTextNode.
  • 01:27 Like I said, we're creating a node.
  • 01:28 Now we've created it, well this is what actually creates it, right?
  • 01:32 It's saying take this p and
  • 01:34 append a child which is this new node which is this text, right?
  • 01:40 So here we've created, and like I said it's a two step process, so
  • 01:44 now we have to add it into our page.
  • 01:46 So before we do that take a look at this, appendChild, down here, appendChild. We're appending,
  • 01:51 we're adding something on after.
  • 01:54 That's what append means added on after.
  • 01:56 Keep that in mind as we move forward.
  • 01:57 That's gonna become important here in just a second.
  • 01:59 So to add this into our page, we're just doing like we've done in the past,
  • 02:03 getElementById, call this id.
  • 02:04 And then we just want to append a child of new p.
  • 02:08 We're gonna slap in our new p.
  • 02:10 So let's save this and come back here, and this is new text, this is some text.
  • 02:14 Hit reload, boom, we see this is new text.
  • 02:16 It just appends it below our tree here.
  • 02:19 So that's adding afterwards.
  • 02:20 We can actually insert before, and there's a method called the .insertBefore method.
  • 02:25 It's basically the same thing.
  • 02:26 We've created our p.
  • 02:28 We create a text node.
  • 02:30 All good, we're still appending this to that.
  • 02:33 That doesn't change, but down here this is gonna change just a little bit.
  • 02:36 And we keep our var myElement the same, but then we add these two lines here.
  • 02:42 It's just var myChild, we're just creating a child and we're getting or grabbing
  • 02:47 that first thing there, and then myElement which we've already created up here.
  • 02:53 We're inserting before our new p, and this is the insert before, right, method.
  • 02:58 And then my child, which is this guy.
  • 02:59 So we have two parameters there.
  • 03:01 If we save this, come back here and hit reload, now, this is new text.
  • 03:05 Goes on top, it's inserted before, this is our old text,
  • 03:09 this is our old p here and it inserts it before.
  • 03:12 So those are two way to create new nodes whether you wanna append after or
  • 03:16 insert before, either of them will do the trick.
  • 03:18 In the next video, I wanna talk about the node list.

Lesson notes are only available for subscribers.

Gift this course