insertAdjacentHTML() is an useful JavaScript function that can be used to insert HTML, and XML 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 /XML content that will be inserted.

Examples insertAdjacentHTML()

1. "beforebegin" :
<div id="id_elm">http://coursesweb.net/</div>

<script>
var cnt = '<div>Website:</div>';
var elm = document.getElementById('id_elm'); 
elm.insertAdjacentHTML('beforebegin', cnt);
</script>
- Results this structure:
<div>Website:</div><div id="id_elm">http://coursesweb.net/</div>

2. "afterend" :
<div id="id_elm">http://coursesweb.net/</div>

<script>
var cnt = '<div>Website:</div>';
var elm = document.getElementById('id_elm'); 
elm.insertAdjacentHTML('afterend', cnt);
</script>
- Results:
<div id="id_elm">http://coursesweb.net/</div><div>Website:</div>

3. "afterbegin" :
<div id="id_elm">Javascript insertAdjacentHTML</div>

<script>
var cnt = '<span>Tutorial: </span>';
var elm = document.getElementById('id_elm'); 
elm.insertAdjacentHTML('afterbegin', cnt);
</script>
- Results this HTML:
<div id="id_elm"><span>Tutorial: </span>Javascript insertAdjacentHTML</div>

4. "beforeend" :
<div id="id_elm">Javascript insertAdjacentHTML</div>

<script>
var cnt = '<span> Tutorial: </span>';
var elm = document.getElementById('id_elm'); 
elm.insertAdjacentHTML('beforeend', cnt);
</script>
- Results this structure:
<div id="id_elm">Javascript insertAdjacentHTML<span> Tutorial: </span></div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
insertAdjacentHTML - Insert content at a specified position

Last accessed pages

  1. jQuery Drag and Drop Rows between two similar Tables (6738)
  2. Basic HTML elements (3681)
  3. Sport Games (12516)
  4. JQZoom Image Magnifier (9297)
  5. Magic Treasure (283)

Popular pages this month

  1. Flash Games - Free online Games (1536)
  2. Qwop (1269)
  3. Tunnel Rush (1133)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1092)
  5. Drag Racer V3 (823)