.insertadjacenthtml() メソッドの使用方法-htmlチュートリアル-php.cn

要約: .insertadjacenthtml() の使用法に関するオンライン情報はほとんどありません。以下は PHP 中国語 Web サイトによってまとめられたチュートリアルです。これは誰にとっても一定の参考になります。

insertAdjacentHTML と insertAdjacentText は、指定した場所に HTML コンテンツとテキストコンテンツを挿入できる非常に柔軟なメソッドであり、ほとんどの場合、element.innerHTML よりも優れたパフォーマンスを発揮し、ドキュメントフラグメントよりも優れた HTML ドキュメントを作成できます。一部の IE バージョンではドキュメントフラグメントが適切に動作しないことを知っておいてください。

insertAdjacentText メソッドは、プレーンテキストのみを挿入できる点と、同じパラメータを持つ点を除けば、insertAdjacentHTML メソッドと似ています。

insertAdjacentHTML メソッドと insertAdjacentText メソッド:

IE の DHTML オブジェクトは、ページ要素のコンテンツを動的に操作するための 4 つの読み取り可能および書き込み可能なプロパティを提供します: innerText、outerText

注意すべき 2 つの点:

#1. innerText プロパティとouterText プロパティの値は通常のテキストとして表示されます。 HTML タグが含まれている場合でも、それは忠実に反映されます。一方、innerHTML と externalHTML は HTML エンジンによって解析されたテキストを表示するため、属性内の HTML タグのパフォーマンス効果を反映できます。

2. オブジェクトのouterText属性とouterHTML属性に値を割り当てると(つまり、書き込み操作)、オブジェクトが削除されます。

上記の 4 つの属性の割り当て操作は、元のオブジェクトのテキストコンテンツを置き換えるだけです。ページ内の指定された要素の関連位置にテキストコンテンツを追加する場合は、insertAdjacentHTML とinsertAdjacentText メソッド。形式は次のとおりです。

object.insertAdjacentText(sWhere, sText)

ログイン後にコピー

object.insertAdjacentHTML(sWhere, sText)

ログイン後にコピー

sWhere は、HTML タグを基準とした挿入テキストの位置を表し、次の 4 つのプリセット値があります:

beforeBegin、afterBegin、beforeEnd 、afterEnd

使用する場合は、次の点に注意してください:

1. これら 2 つのメソッドは、ドキュメント全体がロードされた後にのみ使用できます。それ以外の場合は、エラーが発生します。が発生します。

2. InsertAdjacentText は通常のテキストのみを挿入でき、InsertAdjacentHTML は HTML 形式のテキストを挿入できます。InsertAdjacentHTML を使用してスクリプトを挿入する場合は、script 要素で defer 属性を使用する必要があります。そうでない場合、実行時にスクリプトの実行が発生します。エラー

4.InsertAdjacentHTML html 要素を挿入すると、すべての要素およびその他の可能な要素コレクションが動的変更を反映するために自動的に更新されます。たとえば、ページ上の後続の要素のsourceIndex属性が変更されます。

5. InsertHTML/outerHTML 属性を無効な HTML タグに割り当てると、このメソッドは実行時エラーを引き起こす可能性があります。たとえば、次のコードではエラーが発生します:

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

ログイン後にコピー

さらに、ページコンテンツを動的に操作する場合は、次の詳細に注意する必要があります:

1ドキュメント BODY に表示されるコンテンツのみが上記の属性の影響を受け、メソッドは動的に変更されますが、BODY オブジェクト自体を置き換えることはできません。

2. 上記の属性とメソッドは、input や img などの空のタグ (コンテンツのない HTML タグ) では操作できません。

3. テーブルオブジェクトの場合、td (innerHTML/innerText) およびテーブル (outerHMTL/outerText) オブジェクトのみが特定の属性でコンテンツを置換または挿入できますが、tr や tbody などの他のテーブルオブジェクトはこれらのプロパティを使用できません。内容を変更します。

以前は、innerHTML メソッドと innerText メソッドを使用して HTML コンテンツとテキストコンテンツを追加していましたが、最近、この 2 つのメソッドはより柔軟で、HTML コンテンツとテキストコンテンツを追加できることを発見しました。指定された場所にテキストコンテンツが表示されます。 insertAdjacentHTML メソッド: 指定した場所に HTML タグステートメントを挿入します。

.insertadjacenthtml() メソッドの使用方法

#プロトタイプ: insertAdajcentHTML(swhere,stext)

Element.insertAdjacentHTML メソッドは、HTML 文字列を解析し、生成されたノードを DOM ツリーの指定された位置に挿入します。

element.insertAdjacentHTML(position, text);

ログイン後にコピー

このメソッドは 2 つのパラメータを受け入れます。1 つ目は指定された位置で、2 つ目は解析される文字列です。

パラメータ:

swhere: HTML タグステートメントを挿入する場所を指定します。使用可能な値は 4 つあります:

1. beforeBegin:

タグの開始前に挿入します

2. afterBegin:

タグの開始タグの後に挿入します

3. beforeEnd:

タグの終了タグの前に挿入 #4. afterEnd:

タグの終了タグの後に挿入

// 原来的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>

ログイン後にコピー

注:

このメソッドは、現在の There is a DOM 構造を完全に置き換えるものではありません。これにより、innerHTML 操作よりもはるかに高速に実行されます。

stext: 挿入するコンテンツ

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

ログイン後にコピー

使用法:

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

ログイン後にコピー

JS で使用できます:

test.innerHTML:

ログイン後にコピー

つまり、HTML タグを含む、オブジェクトの開始位置から終了位置までのコンテンツ全体です。上記の例の test.innerHTML の値は

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

ログイン後にコピー

test.innerText:

ログイン後にコピー

開始位置から終了位置までの内容ですが、HTML タグが削除されます

上記の例 .innerTest の値は、span タグが削除された「test1 test2」です。

test.outerHTML:

ログイン後にコピー

innerHTML のコンテンツ全体に加えて、object タグ自体も含まれています。

上記の例の text.outerHTML の値も

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

ログイン後にコピー

完全な例:

<div id="test">
<span style="color:red">test1</span> test2
</div>
innerHTML内容
inerHTML内容
outerHTML内容

ログイン後にコピー

特別な指示:

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>

ログイン後にコピー

以上が.insertadjacenthtml() メソッドの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。