insertAdjacentHTML() method to insert HTML into the document .
Contents
Introduction to JavaScript insertAdjacentHTML() method
The insertAdjacentHTML() is a method of the Element interface so that you can invoke it from any element. The insertAdjacentHTML() method parses a piece of HTML textbook and inserts the resulting nodes into the DOM tree at a assign position :
Reading: JavaScript insertAdjacentHTML
element.insertAdjacentHTML(positionName, text); Code language : JavaScript ( javascript )
The insertAdjacentHTML() method has two parameters :
1) position
The positionName is a string that represents the military position relative to the element. The positionName accepts one of the surveil four values :
'beforebegin': before the element'afterbegin': before its first child of the element.'beforeend': after the last child of the element'afterend': after the element
note that the 'beforebegin' and 'afterend' are only relevant if the element is in the DOM tree and has a parent component. The insertAdjacentHTML() method acting has no revert rate, or undefined by default. The postdate visual image illustrates the position diagnose :
2) text
The text parameter is a string that the insertAdjacentHTML() method parses as HTML or XML. It can not be Node objects
Security consideration
Like the innerHTML, if you use the drug user input signal to pass into the insertAdjacentHTML() method, you should constantly escape it to avoid security risk .
JavaScript insertAdjacentHTML() method example
The adopt JavaScript example uses the insertAdjacentHTML() method to insert respective elements into the foliate with the positions relative to the ul element :
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>insertAdjacentHTML() Demotitle
>
< p class= '' hljs-name '' headway>
<
body
>
<
ul
id
=
“list”
>
<
li
>CSS < p class= '' hljs-name '' li>
< phosphorus class= '' hljs-name '' ul>
<
script
>
let
number =
document
.querySelector (
‘#list’
) ; list.insertAdjacentHTML (
‘beforebegin’
,
‘
Web Technology
‘
) ; list.insertAdjacentHTML (
‘afterbegin’
,
‘
‘
) ; list.insertAdjacentHTML (
‘beforeend’
,
‘
‘
) ; list.insertAdjacentHTML (
‘afterend’
,
‘
For frontend developers
‘
) ; < p class= '' hljs-name '' handwriting>
< phosphorus class= '' hljs-name '' body>
< phosphorus class= '' hljs-name '' hypertext markup language> Code language : HTML, XML ( xml ) How it works :
- First, select the
ulelement by its idlistusing thequerySelector()method. - Next, use the
insertAdjacentHTML()method to insert a heading 2 element before theulelement. The position is'beforebegin'. - Then, use the
insertAdjacentHTML()method to insert a new list item element before the first child of the ul element. The position is'afterbegin'. - After that, use the
insertAdjacentHTML()method to insert a new list item element after the last child of the ul element with the position'beforeend'. - Finally, insert use the
insertAdjacentHTML()method to insert a new paragraph element after the ul element with the position'afterend'.
Summary
- Use the
insertAdjacentHTML()method to insert a text as Nodes into the DOM tree at a specified position. - Always escape the user input text that you pass into the
insertAdjacentHTML()method to avoid security risk.
Was this tutorial helpful ?
Read more: How to Embed a Google Form: Flickroom
