dhtml provides two methods to add, insertAdjacentHTML and insertAdjacentText
insertAdjacentHTML method: Insert html tag statement at the specified place.
Prototype: insertAdjacentHTML(swhere,stext)
parameter:
swhere: Specifies the place where html tag statements are inserted. There are four values available:
1.beforeBegin: Insert before the start of the label
2.afterBegin: Insert after the label start tag
3.beforeEnd: Insert before the end tag of the tag
4.afterEnd: Insert after the end tag of the label
stext: the content to be inserted
example:
Copy the code code as follows:
var sHTML="<input type=button go2()" + " value='Click Me'><BR>"
var sScript='<SCRIPT DEFER>'
sScript = sScript + 'function go2(){ alert("Hello from inserted script.") }'
sScript = sScript + '</script' + '>';
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);
Add a line to the html body:
<DIV ID="ScriptDiv"></Div>
Eventually it becomes:
Copy the code code as follows:
<DIV ID="ScriptDiv">
<input type=button onclick=go2() value='Click Me'><BR>
<SCRIPT DEFER>
function go2(){alert("Hello from inserted sctipt.")}'
</script>
</DIV>
The insertAdjacentText method is similar to the insertAdjacentHTML method, except that it can only insert plain text and has the same parameters.
These two attributes are quite applicable, especially in drawing and other places. Their advantage is that they will not overwrite the original content. Let us assume that there is a DIV that already has content in it. Now we have to add content dynamically without overwriting the original content, so this is very important at this time. innerHTML will overwrite the original content.
All HTML that appears in pairs can use this attribute, which is the same as innerHTML. For example, <body>..</body>, <div>....</div>, etc. all have these two attributes.
Supplement: I just tried it, and the innerHTML attribute is readable and writable. I used to know that innerHTML can insert content into nodes, but this attribute is also readable, which means that innerHTML saves the html content of the node; see You can understand it completely by following the following code:
Copy the code code as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
</head>
<body>
safdsdaf place on time
<script language="javascript">
alert(document.body.innerText)
</script>
</body>
</html>
The above is the code that I forwarded to others. I will add a few more lines of code below. It is also very classic. Maybe you can use it:
Copy the code code as follows:
<script language="javascript" type="text/javascript">
function addFile()
{
var filebutton = '<br><input type="file" size="50" name="File" />';
document.getElementByIdx('FileList').insertAdjacentHTML("beforeEnd",filebutton);
}
</script>
The above is the script in the Head, and the following is the html code in the body:
Copy the code code as follows:
<p id="FileList">
<input type="file" runat="server" size="50" name="File"/>
</p>
You can see the effect by copying the code into a file and saving it as html.