DHTML provides two ways to add, insertadjacenthtml and insertAdjacentText
insertAdjacentHTML Method: Inserts an HTML tag statement at the specified location.
Prototype: insertadjacenthtml (Swhere,stext)
Parameters:
Swhere: Specify where HTML tag statements are inserted, with four values available:
1.beforeBegin: Insert before label start
2.afterBegin: Insert after label start tag
3.BEFOREEND: Insert before tag end tag
4.AFTEREND: Insert after tag end tag
Stext: What to insert
Cases:
Copy 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);
To add a line to the HTML body:
<div id= "Scriptdiv" ></Div>
Eventually become:
Copy 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 only plain text can be inserted, with the same parameters
These two properties are more appropriate, especially in the drawing and other places to use more, its advantage is not to cover the original content, let us assume that, there is a div, it has content, and now we also want to dynamically add content in, and can not cover the original content, Then this thing is very important, innerHTML will be covered with the original things.
All pairs appear in the HTML can use this attribute, this is the same as innerHTML, such as <body> </body>, <div>....</div> and all of these have these two attributes
Add: Just now I tried, innerhtml this property is readable and writable, previously I know innerhtml can insert content on the node, but this attribute is also readable, that is to say innerHTML is stored in the HTML content of the node; Look at the following code to fully understand:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Untitled Document </title>
<body>
Safdsdaf Place on time
<script language= "JavaScript" >
Alert (Document.body.innerText)
</script>
</body>
Above is I reprint to other people's code, below I add a few lines of code, also very classics have, perhaps you use:
Copy Code code as follows:
<script language= "javascript" type= "Text/javascript" >
function AddFile ()
{
var Filebutton = ' <br><input type= ' file ' size= ' name= ' file '/> ';
Document.getelementbyidx (' filelist '). insertAdjacentHTML ("BeforeEnd", Filebutton);
}
</script>
Above is the head inside the script, the following is the body inside: HTML code:
Copy Code code as follows:
<p id= "FileList" >
<input type= "File" runat= "server" size= "name=" "File"/>
</p>
You'll know the effect if you copy the code to a file and save it as an HTML.
