Heim > Artikel > Web-Frontend > Wie verwende ich die Methode .insertadjacenthtml()?
Wie verwende ich die Methode .insertadjacenthtml()?
- 云罗郡主Original
- 2018-10-27 15:20:152516Durchsuche
Zusammenfassung: Es gibt nur sehr wenige Online-Informationen zur Verwendung von .insertadjacenthtml(). Das Folgende ist ein von der chinesischen PHP-Website zusammengestelltes Tutorial, das für jeden einen gewissen Referenzwert hat!
Die beiden Methoden insertAdjacentHTML und insertAdjacentText sind sehr flexibel und können HTML-Inhalte und Textinhalte an bestimmten Stellen einfügen. In den meisten Fällen weisen sie eine bessere Leistung als element.innerHTML und ein besseres HTML-Dokument als Document Fragments auf. Da wir wissen, dass sich Dokumentfragmente in einigen IE-Versionen nicht gut verhalten.
Die Methode insertAdjacentText ähnelt der Methode insertAdjacentHTML, außer dass sie nur einfachen Text einfügen kann und über dieselben Parameter verfügt.
Methoden insertAdjacentHTML und insertAdjacentText:
Das DHTML-Objekt von IE bietet vier lesbare und schreibbare Attribute, um den Inhalt von Seitenelementen dynamisch zu manipulieren: innerText, OUTERText , innerHTML, äußereHTML. Es sind zwei Punkte zu beachten:
1. Die Werte der Attribute innerText und OuterText werden als gewöhnlicher Text dargestellt Auch wenn es HTML-Tags enthält, wird es wahrheitsgetreu wiedergegeben, während innerHTML und äußereHTML den von der HTML-Engine analysierten Text darstellen, was den Leistungseffekt der HTML-Tags in den Attributen widerspiegeln kann. 2. Durch Zuweisen von Werten zu den Attributen „outerText“ und „outerHTML“ eines Objekts (d. h. durch Schreibvorgänge) wird das Objekt gelöscht.
Die Zuweisungsoperation der oben genannten vier Attribute ersetzt nur den Textinhalt des Originalobjekts. Wenn Sie Textinhalte an der relevanten Position des angegebenen Elements auf der Seite hinzufügen möchten, müssen Sie insertAdjacentHTML verwenden insertAdjacentText-Methoden. Die Form ist wie folgt:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
wobei sWhere die Position des eingefügten Texts relativ zum HTML-Tag darstellt. Es gibt vier voreingestellte Werte:
beforeBegin, afterBegin, beforeEnd, afterEnd
Bitte beachten Sie bei der Verwendung folgende Punkte:
1 Diese beiden Methoden können nur verwendet werden, nachdem das gesamte Dokument geladen wurde, andernfalls tritt ein Fehler auf . 2. InsertAdjacentText kann nur normalen Text einfügen, und InsertAdjacentHTML kann Text im HTML-Format einfügen.
3 Wenn Sie InsertAdjacentHTML zum Einfügen eines Skripts verwenden, müssen Sie das Defer-Attribut im Skriptelement verwenden. Andernfalls erfolgt die Skriptausführung während der Laufzeit. Fehler
4.InsertAdjacentHTML Nach dem Einfügen des HTML-Elements werden alle und andere mögliche Elementsammlungen automatisch aktualisiert, um dynamische Änderungen widerzuspiegeln. Beispielsweise ändert sich das sourceIndex-Attribut nachfolgender Elemente auf der Seite.
5. Beim Zuweisen des InsertHTML/outerHTML-Attributs zu einem ungültigen HTML-Tag kann diese Methode einen Laufzeitfehler verursachen. Beispielsweise führt der folgende Code zu einem Fehler:
<BODY>
<p id=pdiv></p>
<SCRIPT LANGUAGE="javascript">
pdiv.innerHTML = "<p>hello</p>"
</SCRIPT>
</BODY> Darüber hinaus müssen bei der dynamischen Bearbeitung des Seiteninhalts folgende Details beachtet werden:
1 . Nur der im Dokument BODY angezeigte Inhalt kann durch die oben genannten Attribute und Methoden dynamisch geändert werden, das BODY-Objekt selbst kann jedoch nicht ersetzt werden. 2. Die oben genannten Attribute und Methoden können nicht auf leere Tags (HTML-Tags ohne Inhalt) angewendet werden, z. B. input, img.
3. Bei Tabellenobjekten können nur td-Objekte (innerHTML/innerText) und Tabellenobjekte (outerHMTL/outerText) Inhalte mit bestimmten Attributen ersetzen oder einfügen, z. B. tr und tbody Inhalte ändern.
Um HTML-Inhalte und Textinhalte hinzuzufügen, habe ich die Methoden innerHTML und innerText verwendet. Kürzlich habe ich entdeckt, dass es die Methoden insertAdjacentHTML und insertAdjacentText gibt, die flexibler sind und HTML-Inhalte und Textinhalte einfügen können an bestimmten Orten. insertAdjacentHTML-Methode: HTML-Tag-Anweisung an der angegebenen Stelle einfügen
. Wie verwende ich die Methode insertadjacenthtml() konkret? )Element.insertAdjacentHTML-Methode analysiert die HTML-Zeichenfolge und fügt dann den generierten Knoten an der angegebenen Position des DOM-Baums ein.
element.insertAdjacentHTML(position, text);
Diese Methode akzeptiert zwei Parameter, der erste ist die angegebene Position und der zweite ist die zu analysierende Zeichenfolge.
Parameter:
swhere: Geben Sie an, wo HTML-Tag-Anweisungen eingefügt werden sollen. Es stehen vier Werte zur Verfügung:
1. beforeBegin: Vor dem Start des Tags einfügen
2. afterBegin:Nach dem Start-Tag des Tags einfügen
3. beforeEnd:Vor dem Tag-End-Tag einfügen
4. afterEnd:Nach dem Tag-End-Tag einfügen
// 原来的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>
Hinweis: Diese Methode ist kein vollständiger Ersatz. Es gibt eine DOM-Struktur, wodurch sie viel schneller als innerHTML-Operationen ausgeführt wird.
stext: Einzufügender Inhalt
<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>Verwendung: <div id="test"> <span style="color:red">test1</span> test2 </div>kann in. JS verwendet werden :
test.innerHTML:Das heißt, der gesamte Inhalt von der Startposition bis zur Endposition des Objekts, einschließlich des HTML-Tags. Der Wert von test.innerHTML im obigen Beispiel ist der Inhalt von
“<span style="color:red">test1</span> test2 ”rrree von der Startposition bis zur Endposition, aber es entfernt das HTML-Tag
aus dem Text Im obigen Beispiel ist der Wert von .innerTest „test1 test2“, wobei das Span-Tag entfernt wurde.
test.innerText:Es enthält nicht nur den gesamten Inhalt von innerHTML, sondern auch das Objekt-Tag selbst. Der Wert von text.outerHTML im obigen Beispiel ist auch
test.outerHTML:Vollständiges Beispiel:
<div id="test"><span style="color:red">test1</span> test2</div>
Besonderer Hinweis:
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
Das obige ist der detaillierte Inhalt vonWie verwende ich die Methode .insertadjacenthtml()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!