Innertext対InnerHTML

5563 ワード
javascript html テキストリンク

導入


私は、Nooccamp Level 0を通して月または2年前にJavaScriptを学び始めました.JavaScriptの2つのプロパティに初めて遭遇しました.時々使用していたinnerText 仕事をやりくりするinnerHTML 正直言って、自分が使っていることにあまり注意を払わなかったので、コードエディターに頼りすぎました.しかし、今何を使うべきかについて話しましょう.

内緒の


簡単な言葉で、このプロパティを使用すると、JavaScript側からHTML要素内にテキスト(String)を置くことができます.InnerTextタグの内容をプレーンテキストとして取得して設定します.したがって、innertextを通過しているどんなストリングでも、視聴者のためにあなたのHTML要素の中にプレーンテキストとしてそれを置くでしょう.その例はこうです.
<html>
<body>
<div style="text-align:center" id="trial1"></div>

<script>
const try1 = document.querySelector("#trial1");
try1.innerText = "This is innerText";
</script>

</body>
</html>

イングリッド


今の名前として、このプロパティを使用すると、テキスト情報を含むHTMLタグ間のコンテンツを印刷できます.Unlike innerText , けれどもinnerHTML HTMLリッチテキストで動作することができますし、自動的にエンコードしないとデコードテキストです.それはあなたが使用できることを意味しますinnerHTML 通常のテキストを渡すにはinnerText …の代わりにinnerHTML . 例innerHTML このようになります.
<tml>
 <body>
    <div style="text-align: center;" id="trial2"></div>

<script>
   const try2 = document.querySelector("#trial2");
   try2.innerHTML = `<p>This is innerHTML</p>
          <img style="width:100px;height:100px;" src="hero.jpg">`;
</script>

  </body>
</html>

比較


<html>
<body>
    <div style="text-align: center;" id="trial1"></div>
    <div style="text-align: center;" id="trial2"></div>

<script>
   const try1 = document.querySelector("#trial1");
   const try2 = document.querySelector("#trial2");
try1.innerText ='<p>This is innerText</p><img style="width:100px;height:100px;" src="hero.jpg">';

try2.innerHTML = `<p>This is innerHTML</p><img style="width:100px;height:100px;" src="hero.jpg">`;
 </script>
</body>
</html>

InnerTextは与えられたストリングから純粋なテキストを印刷しています、そして、innerhtmlはHTML要素と同様に単純なテキストとしてストリングを解読しています.
Redis Sorted Set秩序化集合記憶動作方法
[白俊](Java)1743-食べ物を避ける