Comment utiliser la méthode .insertadjacenthtml() ?-tutoriel HTML-php.cn

Résumé : Il existe très peu d'informations en ligne sur l'utilisation de .insertadjacenthtml() Ce qui suit est un tutoriel compilé par le site Web chinois php, qui a une certaine valeur de référence pour tout le monde !

Les deux méthodes insertAdjacentHTML et insertAdjacentText sont très flexibles et peuvent insérer du contenu HTML et du contenu texte à des endroits spécifiés. Dans la plupart des cas, elles ont de meilleures performances que element.innerHTML et de meilleurs documents HTML que le schéma d'insertion de fragments de document. car nous savons que les fragments de documents ne se comportent pas bien dans certaines versions d'IE.

La méthode insertAdjacentText est similaire à la méthode insertAdjacentHTML, sauf qu'elle ne peut insérer que du texte brut et a les mêmes paramètres.

Méthodes insertAdjacentHTML et insertAdjacentText :

L'objet DHTML d'IE fournit quatre attributs lisibles et inscriptibles pour manipuler dynamiquement le contenu des éléments de la page : innerText, externalText , innerHTML, externalHTML.

Il y a deux points à noter :

1 Les valeurs des attributs innerText et externalText sont présentées comme du texte ordinaire. . Même s'il contient des balises HTML, il sera reflété fidèlement ; tandis que innerHTML et externalHTML présentent le texte analysé par le moteur HTML, ce qui peut refléter l'effet sur les performances des balises HTML dans les attributs.

2. L'attribution de valeurs (c'est-à-dire des opérations d'écriture) aux attributs externalText et externalHTML d'un objet supprimera l'objet.

L'opération d'affectation des quatre attributs ci-dessus remplace uniquement le contenu textuel de l'objet d'origine. Si vous souhaitez ajouter du contenu textuel à la position appropriée de l'élément spécifié dans la page, vous devez utiliser insertAdjacentHTML et. Méthodes insertAdjacentText. Le formulaire est le suivant :

object.insertAdjacentText(sWhere, sText)

Copier après la connexion

object.insertAdjacentHTML(sWhere, sText)

Copier après la connexion

où sWhere représente la position du texte inséré par rapport à la balise html. Il existe quatre valeurs prédéfinies :

beforeBegin, afterBegin, beforeEnd , afterEnd

Veuillez noter les points suivants lors de l'utilisation :

1. Ces deux méthodes ne peuvent être utilisées qu'après le chargement de l'intégralité du document, sinon une erreur se produira.

2. InsertAdjacentText ne peut insérer que du texte ordinaire, et InsertAdjacentHTML peut insérer du texte au format HTML

3 Lorsque vous utilisez InsertAdjacentHTML pour insérer un script, vous devez utiliser l'attribut defer dans l'élément de script, sinon, l'exécution du script se produira pendant l'exécution. Erreur

4.InsertAdjacentHTML Après avoir inséré l'élément html, toutes les collections d'éléments possibles ainsi que les autres collections d'éléments possibles seront automatiquement mises à jour pour refléter les changements dynamiques. Par exemple, l'attribut sourceIndex des éléments suivants de la page changera.

5. Lorsque l'attribut InsertHTML/outerHTML est attribué à une balise HTML non valide, cette méthode peut provoquer une erreur d'exécution. Par exemple, le code suivant provoquera une erreur :

   <BODY>
      <p id=pdiv></p>
      <SCRIPT LANGUAGE="javascript">
           pdiv.innerHTML = "<p>hello</p>"
      </SCRIPT>
      </BODY>

Copier après la connexion

De plus, les détails suivants doivent être pris en compte lors de l'exploitation dynamique du contenu de la page :

1. Seul le contenu affiché dans le document BODY peut être Les propriétés et méthodes ci-dessus changent dynamiquement et le contenu de l'objet BODY peut être manipulé dynamiquement, mais l'objet BODY lui-même ne peut pas être remplacé.

2. Les attributs et méthodes ci-dessus ne peuvent pas fonctionner sur des balises vides (balises html sans contenu), telles que input, img.

3. Pour les objets table, seuls les objets td (innerHTML/innerText) et table (outerHMTL/outerText) peuvent remplacer ou insérer du contenu avec certains autres objets table, tels que tr et tbody ; changer le contenu.

Pour ajouter du contenu HTML et du contenu texte, j'utilisais les méthodes innerHTML et innerText Récemment, j'ai découvert qu'il existe des méthodes insertAdjacentHTML et insertAdjacentText. Ces deux méthodes sont plus flexibles et peuvent insérer du contenu HTML et du contenu texte. à des endroits précis. Méthode insertAdjacentHTML : Insérer une instruction de balise html à l'endroit spécifié

Comment utiliser spécifiquement la méthode insertadjacenthtml()

Prototype : insertAdajcentHTML(swhere,stext ? )< La méthode 🎜>

Element.insertAdjacentHTML analyse la chaîne HTML puis insère le nœud généré dans la position spécifiée de l'arborescence DOM.

element.insertAdjacentHTML(position, text);

Copier après la connexion

Cette méthode accepte deux paramètres, le premier est la position spécifiée et le second est la chaîne à analyser.

Paramètres :

swhere : Spécifiez où insérer les instructions de balise html. Quatre valeurs sont disponibles :

1. beforeBegin : Insérer avant le début de la balise

2. afterBegin :Insérer après la balise de début de la balise

3. beforeEnd :<🎜 >Insérer avant la balise de fin de balise

4. afterEnd :

Insérer après la balise de fin de balise

// 原来的HTML代码：<div id="one">one</div>
var d1 = document.getElementById(&#39;one&#39;);
d1.insertAdjacentHTML(&#39;afterend&#39;, &#39;<div id="two">two</div>&#39;);
// 现在的HTML代码：
// <div id="one">one</div><div id="two">two</div>

Copier après la connexion

Remarque :

Cette méthode n'est pas complète. Remplace la structure DOM existante, ce qui la rend beaucoup plus rapide que les opérations innerHTML.

stext : Contenu à insérer

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　

<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>

Copier après la connexion

Utilisation :

<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>

Copier après la connexion

<!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>

Copier après la connexion

peut être utilisé en JS :

<div id="test">
<span style="color:red">test1</span> test2
</div>

Copier après la connexion

c'est-à-dire de la position de départ de l'objet à la position de fin Tout le contenu , y compris les balises HTML. La valeur de test.innerHTML dans l'exemple ci-dessus est le contenu de la position de départ à la position de fin de

test.innerHTML:

Copier après la connexion

, mais elle supprime la balise HTML

La valeur de text.innerTest dans l'exemple ci-dessus est "test1 test2", avec la balise span supprimée.

“<span style="color:red">test1</span> test2 ”

Copier après la connexion

test.innerText:

Copier après la connexion

En plus de contenir l'intégralité du contenu de innerHTML, il contient également la balise object elle-même.

La valeur de text.outerHTML dans l'exemple ci-dessus est également

test.outerHTML:

Copier après la connexion

Exemple complet :

<div id="test"><span style="color:red">test1</span> test2</div>

Copier après la connexion

Remarque spéciale :

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById(&#39;test&#39;).innerHTML.replace(/<.+?>/gim,&#39;&#39;))">无HTML,符合W3C标准</a>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!