Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript and the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Insert HTML at Specified Positions

3:39 with Guil Hernandez

Use the InsertAdjacentHTML method to insert elements into the DOM. This method provides more control over inserting HTML inside a parent. You pass it the HTML and text content to create as a string, and then that string gets parsed and inserted into the DOM at the position you specify.

Further Reading

Position arguments

insertAdjacentHTML() accepts one of the following strings representing the position relative to an element:

  • 'beforebegin': Before the element itself.
  • 'afterbegin': Just inside the element, before its first child.
  • 'beforeend': Just inside the element, after its last child.
  • 'afterend': After the element itself.

Some additional thoughts:

It's worth mentioning that there are some security considerations that should be taken when inserting HTML into a page with insertAdjacentHTML() and other similar methods. Cross-site scripting (XSS) is a security exploit that allows an attacker to inject malicious client-side code into a website. This can occur when insertAdjacentHTML() is used to insert plain text instead of raw text, which can then be executed as a script within the client's browser. For this reason, it is important to think about where the data is being inserted from. If data is being inserted from a trustworthy backend, then insertAdjactentHTML() offers a fast and reliable approach to inserting content into the DOM.

If your data source is unknown, you may want to consider using Node.textContent or Element.insertAdjacentText(), as these will insert the content as raw text instead of HTML.

To learn more, check out Treehouse's dedicated Web Security course. You may also want to read more in the security sections of the following MDN articles:

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    There are various ways to create elements and insert them into the DOM. 0:00
    Earlier, you used createElement to create a new list item. 0:05
    You set its content using the textContent property. 0:10
    Then added it to the daily task list using the append and prepend methods. 0:13
    Now, you're going to learn how to use the insertAdjacentHTML method to insert 0:19
    elements into the DOM. 0:24
    This method provides more control over inserting HTML inside a parent. 0:26
    You pass it the HTML and text content to create as a string, and 0:31
    then that string gets parsed and inserted into the DOM at the position you specify. 0:35
    Let's see what this looks like when creating our task list items. 0:40
    First, in my btnCreate addEventListener function, 0:44
    I'll delete the lines of code where I used createElement, 0:49
    item.textContent, and the append and prepend methods. 0:53
    Remember, you can always review this code in the project files with this course. 0:58
    We want to create and add list item elements to the task list, 1:03
    which is the ul assigned to the list variable. 1:07
    So let's call the insertAdjacentHTML method on the list variable. 1:12
    I'll create a little extra space between the parentheses, because we're going to be 1:20
    passing the method some information about what we want to insert. 1:24
    This method accepts two arguments, a position argument 1:28
    instructing where inside this element you want to insert the HTML and 1:32
    the actual HTML string you want to insert into the element. 1:37
    You can use one of four options for the position argument. 1:41
    Each lets you insert the HTML in a different location relative to the parent 1:45
    element. 1:48
    For example, before or after the parent, or 1:50
    just before or after its first or last child. 1:54
    You can review each position argument in the teacher's notes. 2:00
    I'm going to pass it the string 'afterbegin', 2:04
    which inserts the content inside the element just before its first child. 2:08
    In our case, it will appear at the top of the task list. 2:14
    And what do we want to insert? 2:19
    A new list item. 2:21
    So as the second argument, 2:23
    I'll use a template literal to build the new list item. 2:25
    Inside the back ticks, add opening and closing li tags. 2:28
    Then I'll use string interpolation with dollar sign curly braces to dynamically 2:34
    insert the value of the text input field inside the list item with input.value. 2:40
    To recap, insertAdjacentHTML will parse this template string as HTML. 2:47
    Then insert the list item into the DOM tree as the first child of the list. 2:54
    Let's save this file, refresh the browser, and type a task into the text field. 3:00
    Click Add task, and it works just as expected, good. 3:09
    insertAdjacentHTML, in many cases, is faster and 3:14
    more efficient than other insertion methods. 3:18
    You can build a new element, set its text content, and 3:21
    then insert it into the DOM all with one method. 3:25
    Next, I'll teach you how to remove an element from the DOM. 3:30

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up