JSでDOM要素のテキスト内容を変更する方法

autoload
リリース: 2021-04-15 14:02:08
オリジナル
2823 人が閲覧しました

JSでDOM要素のテキスト内容を変更する方法

JavaScript で要素を取得するのは最初のステップにすぎません。要素のプロパティを変更する方法は次のステップです。次の重要な手順では、この記事では主に JSDOM 要素の内容を変更する方法について説明します。

#HTML フォームのコンテンツ: #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>
</html>
ログイン後にコピー

1.textContent:

  <script>
        const box=document.querySelector(".box");
        console.log(box);
        const p=document.querySelector(&#39;p&#39;);
        console.log(p);
          //textContent:添加文本
        p.textContent ="hello world";
           
  </script>
ログイン後にコピー

2.innerText:

      <script>
        const box=document.querySelector(".box");
        console.log(box);
        const p=document.querySelector(&#39;p&#39;);
        console.log(p);
        p.innerText ="php.cn";
           
  </script>
ログイン後にコピー

3.innerHTML:

<script>
        const box=document.querySelector(".box");
        console.log(box);
        const p=document.querySelector(&#39;p&#39;);
        console.log(p);
        //将html字符串渲染出来应该使用innerHTML
        p.innerHTML=&#39;<em style="color:red">php.cn</em>&#39;;
  </script>
ログイン後にコピー
おすすめ: 「

2021 js 面接の質問と回答 (大要約)

以上がJSでDOM要素のテキスト内容を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート