Home > Developer > JavaScript
How to insert html content and text content in a specified place
This article describes how to insert html content and text content in a specified place. For example, if you are interested, refer
Dhtml provides two methods to add, insertAdjacentHTML and insertAdjacentText.
InsertAdjacentHTML: insert the html Tag statement at the specified place.
Prototype: insertAdjacentHTML (swhere, stext)
Parameters:
Swhere: specifies where html tag statements are inserted. Four values can be used:
1. beforeBegin: before the start of the tag
2. afterBegin: inserted after the tag starts Marking
3. beforeEnd: insert to the end tag of the tag.
4. afterEnd: insert to the end tag of the tag.
Stext: content to be inserted
Example:
The Code is 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:
The Code is 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, but only plain text can be inserted and the parameters are the same.
These two attributes are quite useful, especially in plotting and other places. The advantage is that they do not cover the original content. Let's assume that there is a DIV, the content already exists in it. Now we need to dynamically Add the content, but cannot overwrite the original content. This is very important at this time, innerHTML overwrites the original content.
This attribute can be used for all pairs of HTML, which is the same as innerHTML, such as <body> .. </body>, <div> .... </div> and so on have these two attributes.
Supplement: I just tried to read and write the innerHTML attribute. I used to know that innerHTML can insert content to nodes, but this attribute is also readable, that is to say, innerHTML stores the node's html content. You can see the following code:
The Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> untitled document </title>
</Head>
<Body>
Safdsdaf on time
<Script language = "javascript">
Alert (document. body. innerText)
</Script>
</Body>
</Html>
The above is the code I post to someone else. Below I will add a few lines of code, which is also very classic. Maybe you are using:
The Code is 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:
The Code is as follows:
<P id = "FileList">
<Input type = "file" runat = "server" size = "50" name = "File"/>
</P>
You can copy the code to a file and save it as an html file.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
