当我们谈论 JavaScript 输出时，我们通常指的是如何将数据或信息显示在网页上。这是通过使用各种 JavaScript 函数和方法来实现的。以下是几种常用的 JavaScript 输出方法以及相应的示例代码。
- 使用
document.write()方法
document.write() 是 JavaScript 中最常用的输出方法之一。它将指定的内容写入到 HTML 文档中。
document.write("Hello, World!");
这段代码将在页面上输出 "Hello, World!"。
然而，请注意，过度使用 document.write() 方法可能导致代码难以维护，并且可能会覆盖页面上的现有内容。
- 使用
innerHTML属性
innerHTML 属性允许你改变一个 HTML 元素的内部 HTML 内容。例如：
document.getElementById("myDiv").innerHTML = "Hello, World!";
这段代码将找到 ID 为 "myDiv" 的 HTML 元素，并将其内容设置为 "Hello, World!"。
与 document.write() 方法相比，使用 innerHTML 属性更加灵活，并且更适合用于更新页面上的现有内容。
- 使用
document.createElement()和appendChild()方法
如果你需要创建新的 HTML 元素并将其添加到页面上，可以使用 document.createElement() 和 appendChild() 方法。例如：
var newElement = document.createElement("p"); // 创建一个新的 <p> 元素
var textNode = document.createTextNode("Hello, World!"); // 创建一个包含文本的文本节点
newElement.appendChild(textNode); // 将文本节点添加到新的 <p> 元素中
document.body.appendChild(newElement); // 将新的 <p> 元素添加到 <body> 元素中
这段代码将创建一个新的 <p> 元素，向其中添加文本 "Hello, World!"，并将其添加到 <body> 元素中。
这种方法可以用于创建和修改更复杂的 HTML 结构，而不仅仅是单个的文本节点。
- 使用模板字符串
如果你需要输出包含变量的文本，可以使用模板字符串。例如：
var name = "Alice";
var greeting = `Hello, ${name}!`; // 使用模板字符串创建字符串 "Hello, Alice!"
console.log(greeting); // 在控制台输出 "Hello, Alice!"
这段代码将创建一个包含变量 name 的模板字符串，并将其赋值给变量 greeting。然后，使用 console.log() 方法在控制台输出 greeting 的值。
模板字符串可以方便地包含占位符（如 ${name}），并在运行时替换为变量的值。这种方法可以使你的代码更加清晰和易于理解。
