数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
