如何使用 JavaScript 替换文档内容?
在本教程中，我们将学习如何使用 JavaScript 替换 HTML 文档的内容。在 JavaScript 中，我们可以使用以下方法的组合来更改 HTML 文档的内容 -
open - open 方法用于打开一个新文档，该文档接受两个参数:text/html 和 replace，其中第一个参数将定义要形成的新文档的类型，后一个参数将替换上一页上的所有添加历史记录，并帮助轻松打开新文档。
document.open("text/html", "replace");
write − 使用 open() 方法创建新文档后，您需要使用 write() 方法，该方法获取新文档的内容，并且您可以在 HTML 标记内传递关联的新文档的内容，如下所示 −
document.write("新文档的内容");
close − close() 方法用于使新文档正常工作，如以下语法所示 −
document.close();
让我们借助代码示例了解所有这些方法的实际实现。
算法
步骤 1 - 在第一步中，我们将在 HTML 文档中定义一个带有 onclick 事件的按钮标签，一旦单击该标签，该标签稍后将用新文档替换文档。
步骤 2 - 在此步骤中，我们将为上一步中定义的按钮分配的 onclick 事件定义回调函数。
步骤 3 - 在最后一步中，我们将根据与每个方法相关的语法使用上述方法在回调函数中编写逻辑，以替换 HTML 文档的内容。
示例 1
以下示例将仅使用一行替换 HTML 文档的内容在段落标签内 −
<!DOCTYPE html>
<html>
<body>
<p>Click and replace this content. </p>
<button onclick = "Display()">Replace</button>
<script>
function Display() {
document.open( "text/html", "replace");
document.write( " <p> This is the replaced content inside paragraph tag only. </p> ");
document.close();
}
</script>
</body>
</html>
在上面的例子中，我们只在与段落标记关联的写入文档中使用了一行，它将用段落标记内的文本替换前一个 HTML 文档的全部内容。
让我们看另一个例子，我们将用一些复杂的文本替换现有 HTML 文档的内容。
算法 - 此示例的算法与上一个算法几乎相似，您只需要将所有新的 HTML 内容聚合到一个字符串变量中，用该变量替换现有文档的内容即可。
示例 2
下面的示例将向您解释如何使用上述三种方法用一些复杂的 HTML 文本替换现有文档的内容 -
<!DOCTYPE html>
<html>
<body>
<p>Click and replace this content.</p>
<button onclick = "Display()">Replace</button>
<script>
var newText = " <h4> This is the new document text </h4>" + " <p> This is the replaced text </p> ";
function Display() {
document.open("text/html", "replace");
document.write(newText);
document.close();
}
</script>
</body>
</html>
在上面的例子中，我们使用了相同的三种方法来替换 HTML 文档的内容，但这次我们将新 HTML 文档的复杂 HTML 内容存储在一个字符串变量中，然后将其传递给 write() 方法，该方法稍后会使用变量中的内容更改当前文档内容。
在本教程中，我们了解了如何使用 JavaScript 的 open()、write() 和 close() 方法通过实际实施来更改现有 HTML 文档的内容，并使用三个不同的代码示例在不同情况下的用法来理解它们的用法。
