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.

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"></div>

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

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

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

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

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

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

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

Daily Test with Code Example

Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
insertAdjacentHTML - Insert content at a specified position

Last accessed pages

  1. HTTP Errors and Logging (39)
  2. Add, Change, and Remove Attributes with jQuery (35999)
  3. Select in MySQL, Output results in HTML Table (3789)
  4. jQuery Drag and Drop Rows between two similar Tables (6875)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)