HTML DOM insertAdjacentElement( ) Method

HTMLWeb DevelopmentFront 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 −

raja
Published on 29-Jul-2019 09:05:30
Advertisements