Home > Article > Web Front-end > How to use the .insertadjacenthtml() method?
How to use the .insertadjacenthtml() method?
- 云罗郡主Original
- 2018-10-27 15:20:152552browse
Abstract: There is very little online information on the usage of .insertadjacenthtml(). The following is a tutorial compiled by the PHP Chinese website, which has certain reference value for everyone!
insertAdjacentHTML and insertAdjacentText are two methods that are very flexible and can insert html content and text content at specified places. In most cases, they have better performance than element.innerHTML and better HTML documents than Document Fragments. Insertion scheme, as we know that Document Fragments don't behave well in some IE versions.
The insertAdjacentText method is similar to the insertAdjacentHTML method, except that it can only insert plain text and has the same parameters.
insertAdjacentHTML and insertAdjacentText methods:
IE's DHTML object provides four readable and writable properties to dynamically manipulate the content of page elements: innerText, outerText, innerHTML, outerHTML.
Two points to note:
#1. The values of the innerText and outerText properties are presented as ordinary text. Even if it contains HTML tags, it will be reflected truthfully; while innerHTML and outerHTML present the text parsed by the HTML engine, which can reflect the performance effect of the HTML tags in the attributes.
2. Assigning a value to the outerText and outerHTML attributes of an object (i.e. writing operation) will delete the object.
The assignment operation of the above four attributes only replaces the text content of the original object. If you want to add text content at the relevant position of the specified element in the page, you need to use the insertAdjacentHTML and insertAdjacentText methods. The form is as follows:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
where sWhere represents the position of the inserted text relative to the html tag, and has the following four preset values:
beforeBegin, afterBegin, beforeEnd, afterEnd
Please note the following points when using:
1. These two methods can only be used after the entire document is loaded, otherwise an error will occur.
2. InsertAdjacentText can only insert ordinary text, and InsertAdjacentHTML can insert text in html format.
3. When using InsertAdjacentHTML to insert a script, you must use the defer attribute in the script element, otherwise the script execution will occur during the runtime. Error
4.InsertAdjacentHTML After inserting the html element, all and other possible element collections will be automatically updated to reflect dynamic changes. For example, the sourceIndex attribute of subsequent elements on the page will change.
5. When assigning InsertHTML/outerHTML attributes to invalid HTML tags, this method may cause a runtime error. For example, the following code will cause an error:
<BODY>
<p id=pdiv></p>
<SCRIPT LANGUAGE="javascript">
pdiv.innerHTML = "<p>hello</p>"
</SCRIPT>
</BODY> In addition, the following details need to be paid attention to when operating the page content dynamically:
1. Only the content displayed in the document BODY can be affected by the above attributes. and methods are dynamically changed. The contents of the BODY object can be dynamically manipulated, but the BODY object itself cannot be replaced.
2. The above attributes and methods cannot operate on empty tags (html tags without content), such as input and img.
3. For table objects, only td (innerHTML/innerText) and table (outerHMTL/outerText) objects can replace or insert content with certain attributes; other table objects, such as tr and tbody cannot Use these properties to change content.
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
.How to use the insertadjacenthtml() method?
Prototype: insertAdajcentHTML(swhere,stext)
The Element.insertAdjacentHTML method parses the HTML string and then inserts the generated node into the specified position of the DOM tree.
element.insertAdjacentHTML(position, text);
This method accepts two parameters, the first is the specified position, and the second is the string to be parsed.
Parameters:
swhere: Specify where to insert the 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
// 原来的HTML代码：<div id="one">one</div> var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // 现在的HTML代码： // <div id="one">one</div><div id="two">two</div>
Note:This method does not completely replace the current There is a DOM structure, which makes it perform much faster than innerHTML operations.
stext: Content to be inserted
<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="更多..." onclick="myfun()">
</body>
</html>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ====
<head>
<title>24.htm insertAdjacentHTML插入新内容</title>
<script language="jscript">
function addsome()
{
document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
}
</script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color=’#ff00ff’">原来的内容</div><hr>
</body>
</html> ============================ ##
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<script>
var num=0;
var No_sys=0;function Add_button(){
if(No_sys<8){
c_input.insertAdjacentHTML("beforeEnd","<div id=/"bar"+num+"/" oncontextmenu=/"Remove_button(bar"+num+");return false/" style=/"background:red;width:40;height:20/">"+num+"</div>");
num++;
No_sys++;
}
}function Remove_button(obj){
obj.removeNode(true);
No_sys--;
}
</script>
<input type="button" onclick="Add_button()" value="动态加">
<input type="button" onclick="alert(c_input.innerHTML)" value="看">
<div id="c_input">
</div>
</BODY>
</HTML> Usage: <div id="test"> <span style="color:red">test1</span> test2 </div>
Can be used in JS:
test.innerHTML:That is, the entire content from the starting position to the ending position of the object, including Html tags. The value of test.innerHTML in the above example is
“<span style="color:red">test1</span> test2 ”
test.innerText:The content from the starting position to the ending position, but it removes the Html tag The text in the above example The value of .innerTest is "test1 test2", with the span tag removed.
test.outerHTML:In addition to containing the entire content of innerHTML, it also contains the object tag itself. The value of text.outerHTML in the above example is also
<div id="test"><span style="color:red">test1</span> test2</div>Complete example:
<div id="test"> <span style="color:red">test1</span> test2 </div> innerHTML内容 inerHTML内容 outerHTML内容
Special instructions:
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
The above is the detailed content of How to use the .insertadjacenthtml() method?. For more information, please follow other related articles on the PHP Chinese website!