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. Add Pause in JavaScript script (7964)
  2. Read Excel file data in PHP - PhpExcelReader (50840)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (3083)
  4. Extract / Unzip ZIP archive files with PHP (1732)
  5. SHA512 Encrypt hash in JavaScript (8211)

Popular pages this month

  1. Qwop (2996)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2371)
  3. Get the value of the selected /checked checkboxes in a form (1497)
  4. Insert, Select and Update NULL value in MySQL (1339)
  5. Add, Change, and Remove Attributes with jQuery (1225)