HTML DOM insertAdjacentHTML( ) Method

HTMLWeb DevelopmentFront End Technology

The HTML DOM insertAdjacentHTML() method inserts text string as HTML at a specified position.

Syntax

Following is the syntax −

Calling insertAdjacentHTML() with parameters of positionString and HTML code

node.insertAdjacentHTML(“positionString”, “htmlString”)

Position Strings

Here, positionString can be the following −

positionStringDescription
afterbeginIt inserts htmlString after the beginning of node element
afterendIt inserts htmlString after the node element
beforebeginIt inserts htmlString before the node element
beforeendIt inserts htmlString before the end of node element

Html Strings

and, “htmlString” can be the following −

positionString
<span>new span</span> or <p>This is a new paragraph</p>
or any other valid html code

Example

Let us see an example for InsertAdjacentHTML() method −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentHTML()</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>insertAdjacentHTML( )</legend>
<h1>Family Tree</h1>
<span id="GrandFather">Grand Father --></span>
<span id="Father">Father --></span>
<span id="Myself">Myself</span>
<input type="button" onclick="rectifyTree()" value="Son is born">
</fieldset>
</form>
<script>
   function rectifyTree() {
      var MSpan = document.getElementById("Myself");
      MSpan.insertAdjacentHTML("afterend", "<span id='Son'>-->Son</span>");
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Son is born’ button −

After clicking ‘Son is born’ button −

raja
Published on 29-Jul-2019 09:16:27
Advertisements