Home > Article > Web Front-end > How to change text content of DOM element in JS

How to change text content of DOM element in JS

autoloadOriginal: 2021-04-07 16:10:102823browse

Obtaining elements in JavaScript is only the first step. How to change the properties of elements is the next step. The following important steps, this article mainly describes how to change the content of the DOM element in JS.

HTML form content:

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

Recommendation: "2021 js interview questions and answers (large summary)"

The above is the detailed content of How to change text content of DOM element in JS. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html JS dom innerHTML

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to convert string to number in javascriptNext article：How to convert string to number in javascript

See more

How to change text content of DOM element in JS

Related articles