文档写入文档获取元素

Document write to document get element

本文关键字:文档 元素 获取      更新时间:2023-09-26

我是 JavaScript 的新手,我希望它进入我的段落,其中 id 输出

但是当我这样做时,我没有得到任何输出。

这是代码,我想将所有document.write更改为document.getElementById('output').innerHTML = blablabla;

<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
    body
    {
        background-color: black;
        color:springgreen;
        text-align: center;
    }
</style>
</head>
<body>
<p id="output"></p>
<script type="text/javascript">
    var names, i, next;
    names = new Array();
    i = 0;
    do {
        next = prompt("Please enter your name");
        if (next > " " && next != "undefined") names[i] = next;
        i++
    }
     while (next > " " && next != "undefined");
   document.write("<h2>" + (names.length) + " names written</h2>");
   document.write("<ol>");
   for (i in names) {
        document.write("<li>" + names[i] + "<br>")
   }
   document.write("</ol>");
</script>
</body>
</html>   

与其使用 document.write,不如将每个部分附加到一个变量中:

var outputHTML = "";
outputHTML += "<h2>"; // etc

然后使用document.getElementById('output').innerHTML = outputHTML;设置您的内容

  var names, i, next;
  // This syntax is preferred
  names = []
  // No need to use a counter here
  do {
    next = prompt("Please enter your name");
    if (next) {
      names.push(next);
    }
  }
  while (next !== "");  // Loop until an empty string/blank input
  var out = [];
  out.push("<h2>" + (names.length) + " names written</h2>");
  out.push("<ol>");
  for (i in names) {
    out.push("<li>" + names[i] + "<br>");
  }
  out.push("</ol>");
  document.getElementById("output").innerHTML = out.join("");