innerText innerHTMLの使い方と注意点【推奨】_javascriptスキル-jsチュートリアル-php.cn

1: テキストとHTMLを動的に変更する

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、それを実行するために更新する必要があります

]

innerText 属性は、出力されるテキストを定義するために使用されます。この例では、innerText はオブジェクト DT 内のテキスト「元気ですか?」を「元気です!」に変更します (ステートメント DT.innerText="I')大丈夫だよ！」）。 innerHTML 属性は、オブジェクト DH の変更に使用されます。 innerText の機能に加えて、オブジェクト DH 内の HTML ステートメントも変更できます。つまり、テキストが「My last name is Xiao!」に変更されます。斜体 () に変更し、その下に直線 ()、つまりステートメント DH.innerHTML=" を追加します。 ;私の姓はシャオです!」。 externalText と innerHTML にも同様の機能があるので、読者は自分で試してみるとよいでしょう。
2: テキストの動的入出力

[Ctrl A すべて選択注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]
この例の効果は、最初にテキストボックスにテキストを入力し、次に [テキストの出力] ボタンを押すことです。すると、入力したテキストが Web ページに自動的に出力されます
3: innerHTML には自動構文チェック機能により、自動的にHTMLコードが完成します。これは魔法ともいえる

、例えば次のスクリプト

[Ctrl A すべて選択注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

ランニングの効果は次のとおりです: innerText innerHTMLの使い方と注意点【推奨】_javascriptスキル

図に示すように:

使用するときは注意してください。たとえば、コードをコピーするとエラーが発生します。 >

コードは次のとおりです:

list.innerHTML=""; list.innerHTML="

"
中間変数を使用する必要があります
HTML コード

コードをコピーコードは次のとおりです:

var html="";
html ="

";
list.innerHTML=html; ;html ="

";
list.innerHTML=html;

この方法で問題は解決できます。
また:
innerText は Firefox ではサポートされていません。インターネット上でこれを行う人もいます。
innerHTML は W3C 標準に準拠する属性であり、innerText は IE ブラウザにのみ適用されます。そのため、できるだけ innerHTML を使用してください。 HTML タグなしでコンテンツを出力するには、innerHTML を使用して HTML タグを含むコンテンツを取得し、正規表現を使用して HTML タグを削除します。
< a href="javascript :alert(document.getElementById('test').innerHTML.replace(/<. ?>/gim,''))">HTML なし、W3C 標準に準拠