Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
AppendChild is a great method, but you don't always want to place an element as a child of another element. You need to be able to insert notes at any position inside a node list. If you watch the last movie, we sorted of cheated a little bit by already having a list item element, in which to place our image. That made it easier to use appendChild, but thankfully there's a great function called Insert Before that lets you place a node in a precise location. Let's take a look at that in a document, so this works a lot like a pen child.
Before we use it I need to get into developer tools, so Cmd+Option+I, Ctrl+Alt+I on a PC, and then Esc. Now what I want to do is add a new paragraph in our venue, travel section. So let me click on the Venue/Travel section first and scroll down to right here. I want to put it right in between these two paragraphs. So I'm going to grab the magnifying glass. Click on one of these paragraphs, and there I am. I want to put that right before. So first we are going to create the paragraph element. I will create a variable called pNode and make that equal to a new element, so document.createElement and we want to create a paragraph element here. So I had written I have got my paragraph and now I need to create a text node for insertion into this paragraph so I will create a new variable call it myText. And this time I'm going to create a TextNode.
And now we need to append the text to our paragraph node. So this time I'll go ahead and use appendChild. So the pNode and appendChild, then I'll pass along my TextNode. So let's check out pNode right now. It should be a paragraph with the text that we specified. So in order to insert that in between the two paragraphs, we'll need to grab the location of the venue section. So I'll create another variable, this time I'll call it new node.
And I'll use query selector to find the element with an ID of the venue. Now that we have the node we need to analyze it a little bit. So we'll do a directory in this newNode and check out what's inside. So if we take a look, this article has seven child nodes. Now a lot of them are going to be text nodes that are just carriage returns. Here's the first paragraph, and here's the second paragraph. So what we want to do is insert a new paragraph before node five.
Which is the second paragraph, so what I'll do here is use this new node that I created and then say insert before. What I want to insert, which is pNode, the paragraph, and then insert it into new node and then childNodes and I'll want to place it before child node number five. So when I hit return, it should add that paragraph in between those other two paragraphs. So insert before is definitely a more surgical insertion than appendChild.
It's much easier to use when we want to insert things in specific place in the node list, it's the only way to go.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 100819 Viewers
61 Video lessons · 87663 Viewers
71 Video lessons · 71528 Viewers
56 Video lessons · 103460 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.