js输出/设置文本的几种方式

代码2020-05-13433 人已阅来源:网络

js常见的输出文本:

  • document.write
  • alert
  • console.log

js常见的获取/设置文本:

  • .value
  • .textContent
  • .innerText
  • .innerHTML

具体的可以看下方的示例:

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js获取/设置文本的几种方式</title>
</head>
<body>
  <div id="itt">如果你还能见我,就说明更改没有生效</div>
  <div id="ih">如果你还能见我,就说明更改没有生效</div>
  <div id="it">如果你还能见我,就说明更改没有生效</div>
  <div><input type="text"></div>
  <div><textarea name="" id="" cols="30" rows="10"></textarea></div>
  <script>
    // 通过document.write输出
    document.write(Date());
    document.write("<h2>我是个标题二</h2>")
    // 通过alert输出
    alert(Date());
    // console.log 控制台输出
    console.log(Date())
    //value 获取/设置
    document.getElementsByTagName("input")[0].value = Date();
    console.log("我是input的老婆:" + document.getElementsByTagName("input")[0].value)
    document.getElementsByTagName("textarea")[0].value = Date();
    //textContent、innerText或者innerHTML获取/设置
    document.getElementById("itt").textContent = "<h2>我是textContent输出</h2>";
    console.log(document.getElementById("itt").textContent)
    document.getElementById("it").innerText = "<h2>我是innerText输出</h2>";
    console.log(document.getElementById("it").innerText)
    document.getElementById("ih").innerHTML = "<h2>我是innerHTML输出</h2>";
    console.log(document.getElementById("ih").innerHTML)
  </script>
</body>
</html>