As a general course of study in web development, I recommend learning HTML, CSS and PHP in that order, then JavaScript. It’s very easy to print something to the browser window in the first three languages: in PHP, one typically uses echo, print, printf, or a similar function. You can use echo exactly where you want the information to be shown on the page:
作为Web开发的一般课程，我建议先学习HTML ， CSS和PHP ， 然后再学习 JavaScript 。 使用前三种语言在浏览器窗口中打印内容非常容易：在PHP中，通常使用echo ， print ， printf或类似功能。 您可以在要在页面上显示信息的确切位置使用echo ：
<p><?php echo $var ?>It’s not always clear how to accomplish the same in JavaScript. The simplest option, and the one most similar to echo, is also the least recommended: document.write
并非总是很清楚如何在JavaScript中完成相同的工作。 最不推荐的选项，也是最类似于echo选项，也不推荐使用： document.write
<p>It’s easy to write information to the screen <script>document.write("with JavaScript");</script>This “inline” JavaScript is inserted exactly where you want the new information to be added. There’s also the closely related document.writeln, which adds a newline character after the insert.
此“内联” JavaScript恰好插入到要添加新信息的位置。 还有密切相关的document.writeln ，它在插入后添加换行符。
笔记 (Notes)
That’s a lowercase L in
document.writeln: the function stands for “document write new line”那是
document.writeln的小写字母L ：该函数代表“文档写入新行”The inserted newline character adds a return to the DOM of your code, not to what is displayed on the screen. To accomplish a visual line return on the page, you would need to add appropriate markup:
插入的换行符将返回值添加到代码的DOM中， 而不是在屏幕上显示的内容中。 要在页面上返回可见的线条，您需要添加适当的标记：
<p>It’s easy to write information to the screen
<script>document.writeln("with JavaScript <p>More… ");</script>In theory, document.write could display any kind of information you wished wherever it is used on a page: the value of a variable, an array, etc. However writing JavaScript inline this way is usually sub-optimal, for several reasons:
从理论上讲， document.write可以在页面上的任何地方显示您想要的任何类型的信息：变量，数组等的值。但是，以内联方式编写JavaScript通常是次优的，原因如下：
document.writepotentially opens a site to cross-site scripting attacks.document.write可能会使站点遭受跨站点脚本攻击。- Scattering little pieces of JavaScript throughout your page makes it difficult to keep track of your code. 在页面中散布少量JavaScript使得很难跟踪代码。
Used outside the inline context – for example, in embedded or linked JavaScript file –
document.writewill replace the entire content of a page.在内联上下文之外使用(例如，在嵌入式或链接JavaScript文件中)，
document.write将替换页面的整个内容。
Instead, it’s often better to separate the JavaScript from the immediate context of the area to be altered, and use innerHTML instead:
相反，通常最好将JavaScript与要更改的区域的直接上下文分开，并使用innerHTML代替：
<div id="sensorium"></div>
<script>
var insert = "<p>The seat of sensation";
document.getElementById("sensorium").innerHTML = insert;
</script>The result will be the words “The seat of sensation” formatted as a paragraph inside the div with an id of sensorium. Alternately, using JQuery:
其结果将是写着“ 感觉的座位 ”格式化为内部段落div与id 感觉中枢的。 或者，使用JQuery：
<script>
var insert = "<p>The seat of sensation";
$('#sensorium').text(insert);
</script>The innerHTML property entirely replaces the content of the element it targets. The property interprets the new content as HTML – indeed, any HTML can be included in the value, and will be inserted into the element. (Note that JavaScript inserted via this method will not be executed).
innerHTML属性将完全替换其目标元素的内容。 该属性将新内容解释为HTML –实际上，任何HTML都可以包含在值中，并将被插入到元素中。 (请注意，将不会执行通过此方法插入JavaScript)。
Like most JavaScript properties, innerHTML can be used to both read and write values. If you wanted to gather the existing content of a div into a JavaScript variable in order to manipulate it, you could do so using the same property:
像大多数JavaScript属性一样， innerHTML可用于读取和写入值。 如果您想将div的现有内容收集到JavaScript变量中以进行操作，则可以使用相同的属性进行操作：
var content = document.getElementById("sensorium").innerHTML;The property is also a quick and easy way to clear the content of an element:
该属性也是清除元素内容的快速简便的方法：
document.getElementById("sensorium").innerHTML = "";If you want to retain the content that already exists inside the targeted element and then add to it, use insertAdjacentHTML. (For this and following examples I’ll use the more powerful queryselector to target the element I wish to alter).
如果要保留目标元素中已经存在的内容然后添加到其中，请使用insertAdjacentHTML 。 (对于此示例和以下示例，我将使用功能更强大的queryselector定位要更改的元素)。
<div id=sensorium><p>The sum of an organism's perception.</div>
<script>
var insert = " The seat of sensation. ";
document.querySelector("#sensorium").insertAdjacentHTML('afterbegin', insert);
</script>insertAdjacentHTML can take one of four values: beforebegin, afterbegin, beforeend and afterend. The result of each would look like the following :
insertAdjacentHTML可以采用以下四个值之一： beforebegin ， afterbegin ， beforeend和afterend 。 每个的结果如下所示：
| Value | Result |
|---|---|
beforebegin | |
afterbegin | |
beforeend | |
afterend |
| 值 | 结果 |
|---|---|
beforebegin | |
afterbegin | |
beforeend | |
afterend |
Using innerHTML opens the possibility of cross-site scripting attacks, especially when inserting values over which you have no control. For that reason, textContent is sometimes recommended instead.
使用innerHTML可能会发生跨站点脚本攻击，尤其是在插入您无法控制的值时。 因此，有时建议使用textContent 。
document.querySelector("#sensorium").textContent = "This is some new text";textContent works in the same way as insertHTML, but does not process the value, entering it as raw text: markup that is part of the value will be printed on the screen, rather than acting on the DOM. For that reason, it also has the advantage of being slightly faster.
textContent工作方式与insertHTML相同，但是不处理该值，而是将其作为原始文本输入：作为值一部分的标记将显示在屏幕上，而不是作用在DOM上。 因此，它还具有更快一点的优势。
结论 (Conclusion)
As you can see, there is a multitude of methods to print whatever you want to an HTML page with JavaScript, with each having its own purpose.
如您所见，有多种方法可以用JavaScript将想要打印的内容打印到HTML页面，每种方法都有自己的用途。
翻译自: https://thenewcode.com/233/Printing-Information-to-the-Screen-with-JavaScript
1291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
