javascript document.write 在同一页面上显示内容。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17894936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.write to display content on same page.
提问by Sameeksha Kumari
I have a doubt with javascript document.write method. Mostly when I use document.write() it shows me the content written with the method in a different page. For instance, if I write the command like this, document.write("Hello, My name is Sameeksha"); then the execution of this line takes me to a different document on the same page. I want to be able to append the message on the same page, with other elements of the page. For example, if I have text boxes and buttons on the page and I want the text with document.write to appear under all the content of the page or on a particular section of a page. Please suggest what can be done to get the output in this way? As, this way it will be really easy to create dynamic HTML content. Thank you so much for your time.
我对 javascript document.write 方法有疑问。大多数情况下，当我使用 document.write() 时，它会向我显示在不同页面中使用该方法编写的内容。例如，如果我写这样的命令， document.write("Hello, My name is Sameeksha"); 然后这一行的执行将我带到同一页面上的不同文档。我希望能够将消息与页面的其他元素一起附加到同一页面上。例如，如果页面上有文本框和按钮，并且我希望带有 document.write 的文本出现在页面的所有内容下或页面的特定部分。请建议如何以这种方式获得输出？因为，通过这种方式创建动态 HTML 内容将非常容易。非常感谢您的参与。
Regards, Sameeksha Kumari
问候， Sameeksha Kumari
回答by 6502
document.writeis basically never used in modern Javascript.
document.write基本上从未在现代 Javascript 中使用过。
Whan you do instead is to create explicit DOM elements and append them to the document in the place you want. For example
相反，您要做的是创建显式 DOM 元素并将它们附加到文档中您想要的位置。例如
var x = document.createElement("div"); // Creates a new <div> node
x.textContent = "Hello, world"; // Sets the text content
document.body.appendChild(x); // Adds to the document
Instead of appending to the end you can also add child nodes to any existing node. For example:
您还可以将子节点添加到任何现有节点，而不是附加到末尾。例如：
function addChatMessage(msg) {
var chat = document.getElementById("chat"); // finds the container
var x = document.createElement("div");
x.textContent = msg;
chat.appendChild(x);
}
回答by DaoWen
I'd say 6502 posted the more correct way to do it, but I think someone should mention innerHTMLas well. First, give some element in your HTML body an id so you can reference it:
我会说 6502 发布了更正确的方法，但我认为有人也应该提到innerHTML。首先，为 HTML 正文中的某个元素提供一个 id，以便您可以引用它：
<div id="outputDiv">I'm empty.</div>
Then, either at the bottom of your document (at the end of the <body>tag), or any other time after the page is loaded, you can update the contents with innerHTML:
然后，在文档底部（<body>标签末尾）或页面加载后的任何其他时间，您都可以使用以下命令更新内容innerHTML：
document.getElementById("outputDiv").innerHTML = "<h1>Hello!!!</h1>";
Here's a jsfiddle demonstrating this.This isn't as clean/correct/elegant as using the more standard DOM methods, but it's well supported. Sometimes quick and dirty is what you need!
这是一个演示这一点的 jsfiddle。这不像使用更标准的 DOM 方法那样干净/正确/优雅，但它得到了很好的支持。有时快速和肮脏是你所需要的！
