In the past, the innerHTML and innerText methods were used to add HTML content and text content. Recently, I discovered that there are also insertAdjacentHTML and insertAdjacentText methods. These two methods are more flexible and can insert HTML content and text content at specified places.
insertAdjacentHTML method: Insert html tag statement at the specified place
Prototype: insertAdajcentHTML(swhere,stext)
Parameters:
swhere: Specify the place to insert html tag statement. There are four values available:
1. beforeBegin: Insert before the start of the tag
2. afterBegin: Insert after the start tag of the tag
3. beforeEnd: Insert before the end tag of the tag
4. afterEnd: Insert after the end tag of the tag
text: Content to be inserted
DEOM:
<html>
<head>
<script language="javascript">
function myfun ()
{
var obj = document.getElementById("btn1");
obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");
}
</script>
</head>
< body>
<input name="txt">
<input id="btn1" name="btn1" type="button" value="more..." onclick="myfun()">
</body>
</ html>