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 a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
insertAdjacentHTML - Insert content at a specified position

Last accessed pages

  1. Contact page - CoursesWeb (48922)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (140495)
  3. Send E-mail with HTML tags and Attachment (5591)
  4. Editing, Changing XML - E4X (1812)
  5. CSS Rhombus Shape (7618)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (70)
  2. Read Excel file data in PHP - PhpExcelReader (11)
  3. ActionScript 3 Lessons (7)
  4. The Mastery of Love (7)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (6)