How to insert HTML content and text content in the specified place
- 2020-03-30 01:02:04
- OfStack
DHTML provides two methods to add, insertAdjacentHTML and insertAdjacentText
InsertAdjacentHTML methods: insert HTML tags statements in the specified place.
Prototype: insertAdjacentHTML (swhere stext)
Parameters:
Swhere: specifies where to insert an HTML tag statement. There are four values that can be used:
1. BeforeBegin: insert before the start of the tag
AfterBegin: inserted after the start tag
3. BeforeEnd: insert before the end tag
AfterEnd: insert after the end of the tag
Stext: what to insert
Ex. :
Add a line to the HTML body:
< DIV ID = "ScriptDiv" > < / Div>
Eventually it becomes:
InsertAdjacentText method with insertAdjacentHTML similar, only can only be inserted into the plain text, parameters are the same
These two properties is applicable, especially in places with more such as drawing, it will not cover the advantages of the original content, let us suppose that there is a DIV, it already has content, now we need to add dynamic content, and fails to cover the content of the original, so this time it is very important, will be your original cover the innerHTML.
All pairs of HTML can use this property, just like innerHTML, like < Body> . < / body> , < Div> . < / div> All of these have these two properties
Just to add: I tried that out, the innerHTML property is read-write, I knew that innerHTML can insert content into a node, but this property is also readable, which means that the content of the node is stored in innerHTML; Take a look at the following code to fully understand:
Above is the code that I repost to others, below I add a few lines of code, also very classic, perhaps you use:
Above is the script inside the Head, below is the body: HTML code:
You just copy the code into a file and save it as HTML.
InsertAdjacentHTML methods: insert HTML tags statements in the specified place.
Prototype: insertAdjacentHTML (swhere stext)
Parameters:
Swhere: specifies where to insert an HTML tag statement. There are four values that can be used:
1. BeforeBegin: insert before the start of the tag
AfterBegin: inserted after the start tag
3. BeforeEnd: insert before the end tag
AfterEnd: insert after the end of the tag
Stext: what to insert
Ex. :
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:
<DIV ID="ScriptDiv">
<input type=button onclick=go2() value='Click Me'><BR>
<SCRIPT DEFER>
function go2(){alert("Hello from inserted sctipt.")}'
</script>
</DIV>
InsertAdjacentText method with insertAdjacentHTML similar, only can only be inserted into the plain text, parameters are the same
These two properties is applicable, especially in places with more such as drawing, it will not cover the advantages of the original content, let us suppose that there is a DIV, it already has content, now we need to add dynamic content, and fails to cover the content of the original, so this time it is very important, will be your original cover the innerHTML.
All pairs of HTML can use this property, just like innerHTML, like < Body> . < / body> , < Div> . < / div> All of these have these two properties
Just to add: I tried that out, the innerHTML property is read-write, I knew that innerHTML can insert content into a node, but this property is also readable, which means that the content of the node is stored in innerHTML; Take a look at the following code to fully understand:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> Headless document </title>
</head>
<body>
safdsdaf Place on time
<script language="javascript">
alert(document.body.innerText)
</script>
</body>
</html>
Above is the code that I repost to others, below I add a few lines of code, also very classic, perhaps you use:
<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>
Above is the script inside the Head, below is the body: HTML code:
<p id="FileList">
<input type="file" runat="server" size="50" name="File"/>
</p>
You just copy the code into a file and save it as HTML.