数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 替换文档内容？
在本教程中，我们将学习如何使用 JavaScript 替换 HTML 文档的内容。在 JavaScript 中，我们可以结合以下方法更改 HTML 文档的内容：
open - open 方法用于打开一个新文档，它接受两个参数 text/html 和 replace，其中第一个参数将定义要形成的新文档的类型，第二个参数将替换所有添加到上一个页面上的历史记录，并有助于轻松打开新文档。
document.open("text/html", "replace");
write - 使用 open() 方法创建新文档后，您需要使用 write() 方法，该方法接受新文档的内容，并且您可以传递与 HTML 标签关联的新文档的内容，如下所示：
document.write("content of new document");
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>
在上面的示例中，我们在与段落标签关联的 write 文档内只使用了一行内容，这将用段落标签内的该文本替换整个先前 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 文档的内容。
3K+ 次查看
