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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
insertAdjacentHTML - Insert content at a specified position

Last accessed pages

  1. Contact page - CoursesWeb (10968)
  2. Tabs effect with CSS (11675)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (17574)
  4. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (15674)
  5. SHA512 Encrypt hash in JavaScript (12625)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1975)
  2. Contact page - CoursesWeb (1923)
  3. Tabs effect with CSS (1923)
  4. Insert, Select and Update NULL value in MySQL (1228)
  5. PHP getElementById and getElementsByTagName (722)