insertAdjacentHTML() is an useful JavaScript function that can be used to insert HTML content at a specified position into DOM tree.
This function does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside the element. This make it much faster than direct innerHTML manipulation.

Syntax:
element.insertAdjacentHTML(position, content);
- position - is the position relative to the element, and must be one of the following strings: - content - is a string with the HTML content that will be inserted in page.

Examples with insertAdjacentHTML()

1. 'beforebegin' :
<h4>Example insertAdjacentHTML() - beforebegin</h4>
<div id='dv1'>Div - https://coursesweb.net/</div>
<p>If you click the following button, it adds a HTML content in page, with the <b>'beforebegin'</b> argument, relative to the Div above.</p>
<button id='btn1'>Try it</button>

<script>
var cnt = '<b>Website:</b>';
var elm = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 elm.insertAdjacentHTML('beforebegin', cnt);
});
</script>
2. 'afterend' :
<h4>Example insertAdjacentHTML() - afterend</h4>
<div id='dv1'>Div - https://coursesweb.net/</div>
<p>If you click the following button, it adds a HTML content in page, with the <b>'afterend'</b> argument, relative to the Div above.</p>
<button id='btn1'>Try it</button>

<script>
var cnt = '<b>Website:</b>';
var elm = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 elm.insertAdjacentHTML('afterend', cnt);
});
</script>
3. 'afterbegin' :
<h4>Example insertAdjacentHTML() - afterbegin</h4>
<div id='dv1'>Div - Javascript insertAdjacentHTML</div>
<p>If you click the following button, it adds a HTML content in page, with the <b>'afterbegin'</b> argument, relative to the Div above.</p>
<button id='btn1'>Try it</button>

<script>
var cnt = '<b>Tutorial: </b>';
var elm = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 elm.insertAdjacentHTML('afterbegin', cnt);
});
</script>
4. 'beforeend' :
<h4>Example insertAdjacentHTML() - beforeend</h4>
<div id='dv1'>Div - Javascript insertAdjacentHTML</div>
<p>If you click the following button, it adds a HTML content in page, with the <b>'beforeend'</b> argument, relative to the Div above.</p>
<button id='btn1'>Try it</button>

<script>
var cnt = '<b>Tutorial: </b>';
var elm = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 elm.insertAdjacentHTML('beforeend', cnt);
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
insertAdjacentHTML - Insert content at a specified position

Last accessed pages

  1. Calling Function and Class Method with Name from String (1767)
  2. MySQL Query Builder: Insert, Update, Delete (520)
  3. Volume and Surface Area Calculator for 3D objects (8268)
  4. Convert XML to JSON in JavaScript (21878)
  5. Contact page - CoursesWeb (27505)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1585)
  2. Contact page - CoursesWeb (1548)
  3. Tabs effect with CSS (1542)
  4. PHP getElementById and getElementsByTagName (749)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (624)