您的位置是:网站首页>Javascript编程Javascript编程

如何在JS中改变DOM元素的文本内容

少儿编程网2021-06-09 15:39:17Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介HTML表单内容:<!DOCTYPEhtml><htmllang=en><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatible&

TA0少儿编程网-https://www.pxcodes.com

HTML表单内容:
TA0少儿编程网-https://www.pxcodes.com

<!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:TA0少儿编程网-https://www.pxcodes.com

  <script>
        const box=document.querySelector(".box");
        console.log(box);
        const p=document.querySelector('p');
        console.log(p);
          //textContent:添加文本
        p.textContent ="hello world";
           
  </script>

2.innerText:TA0少儿编程网-https://www.pxcodes.com

      <script>
        const box=document.querySelector(".box");
        console.log(box);
        const p=document.querySelector('p');
        console.log(p);
        p.innerText ="php.cn";
           
  </script>

3.innerHTML:TA0少儿编程网-https://www.pxcodes.com

<script>
        const box=document.querySelector(".box");
        console.log(box);
        const p=document.querySelector('p');
        console.log(p);
        //将html字符串渲染出来应该使用innerHTML
        p.innerHTML='<em style="color:red">php.cn</em>';
  </script>

推荐:《2021年js面试题及答案(大汇总)》

以上就是如何在JS中改变DOM元素的文本内容的详细内容,更多请关注少儿编程网其它相关文章!TA0少儿编程网-https://www.pxcodes.com

来源:php中文网TA0少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

如何在JS中改变DOM元素的文本内容

      匿名评论
    • 评论
    人参与,条评论
    如何在JS中改变DOM元素的文本内容

微信公众号

免费视频教程

先知道