Javascript Course

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
What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
</select>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicate the PHP function used to redirect to other page.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
insertAdjacentHTML - Insert content at a specified position

Last accessed pages

  1. Redirects (3876)
  2. PHP Unzipper - Extract Zip, Rar Archives (20159)
  3. Read Excel file data in PHP - PhpExcelReader (90365)
  4. Get Lower, Higher, and Closest Number (4526)
  5. JavaScript Chronometer / Stopwatch (6980)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (40)
  2. JavaScript Course - Free lessons (28)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (26)
  4. HTML Course - Free Lessons (23)
  5. Wake Up! (18)