innerText innerHTMLの使い方と注意点【推奨】_javascriptスキル

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>デモ1</title> <style type="text/css"> p { color:gray; } </style> <p> </p> <p>下のテキストをクリックしてください... </p> <ul> <li id="DT" onclick="changeText()"> </li>お元気ですか?<li id="DH" onclick="changeHtml()"> </li>あなたの姓は何ですか?<li onclick="back()"> </li>元の状態に復元します</ul>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、それを実行するために更新する必要があります

]

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title>デモ2<style type="text/css"> p { color:gray; } body { font-family:宋体; color:blue; font-size:9pt; } .blue { color:blue; font-size:9pt; } </style> <form id="frm"> <p> <input type="text" name="txt" size="50"> <input type="button" value="输出文本" class="blue" onclick="OutputText()"> テキスト ボックスにテキストを入力してください: </p> <p id="output"> </p> </form> ここにテキストを出力します:
[Ctrl A すべて選択 注:

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

、例えば次のスクリプトです。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> デモ 3 <p id="tab" onclick="Get()"> </p> クリックしてください!!!

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

ランニングの効果は次のとおりです:
図に示すように:

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

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


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

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

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

var html="";
html ="html ="

";
list.innerHTML=html; ;

";
list.innerHTML=html;

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