HTML DOM insertAdjacentText( ) Method

HTML Web Development Front End Technology

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

Syntax

Following is the syntax −

Calling insertAdjacentText() with parameters of positionString and text

node.insertAdjacentText(“positionString”, text)

Position Strings

Here, “positionString” can be the following −

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

Example

Let us see an example for InsertAdjacentText() method −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentText()</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>insertAdjacentText( )</legend>
<h1>First Muslim President of India</h1>
<h2 id="president">A.P.J Abdul Kalam</h2>
<input type="button" onclick="rectifyName()" value="Correct Name">
</fieldset>
</form>
<script>
   function rectifyName() {
      var presidentH2 = document.getElementById("president");
      presidentH2.insertAdjacentText("afterbegin", "DR. ");
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Correct Name’ button −

After clicking ‘Correct Name’ button −

AmitDiwan

Published on 29-Jul-2019 10:55:21

Previous Page Print Page