HTML DOM insertAdjacentElement( ) Method

HTML Web Development Front End Technology

The HTML DOM insertAdjacentElement() method inserts an element at a specified position.

Syntax

Following is the syntax −

Calling insertAdjacentElement() with parameters of positionString and element

node.insertAdjacentElement(“positionString”, element)

Position Strings

Here, “positionString” can be the following −

positionString	Description
afterbegin	It inserts element after the beginning of node element
afterend	It inserts element after the node element
beforebegin	It inserts element before the node element
beforeend	It inserts element before the end of node element

Example

Let us see an example for InsertAdjacentElement() method −

Live Demo

<!DOCTYPE html>
<html>  
<head>
<title>insertAdjacentElement()</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertAdjacentElement( )</legend>
<h1>Family Tree</h1>
<span id="Father">Father --></span>
<span id="GrandFather">Grand Father --></span>
<span id="Myself">Myself</span>
<input type="button" onclick="rectifyTree()" value="Correct Family Tree">
</fieldset>
</form>
<script>
   function rectifyTree() {
      var FSpan = document.getElementById("Father");
      var GFSpan = document.getElementById("GrandFather");
      GFSpan.insertAdjacentElement("afterend", FSpan);
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Correct Family Tree’ button −

After clicking ‘Correct Family Tree’ button −

AmitDiwan

Updated on 30-Jul-2019 22:30:26

Previous Page Print Page Next Page