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
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
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(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
insertAdjacentHTML - Insert content at a specified position

Last accessed pages

  1. Creating objects in ActionScript (8627)
  2. PHP PDO - Select query, fetch (23909)
  3. dompdf (2716)
  4. PHP getElementById and getElementsByTagName (38786)
  5. querySelector and querySelectorAll (16183)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (478)
  2. Register and show online users and visitors (337)
  3. JavaScript Course - Free lessons (248)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (248)
  5. querySelector and querySelectorAll (237)