完全使用 JavaScript 替换 html 元素（无库）[重复]

Question

我正在研究嵌入式 WKWebView（iOS 上的浏览​​器视图），所以我不想/不能使用任何库，需要纯粹在 JavaScript 中实现以下目标。

在加载 Web 视图的内容时，我想清除以前的内容，并显示类似“正在加载...”的内容。

最明显的方法是

document.body.innerHTML = "Loading...";

（方法一）

但问题是它使页面的其他元素（例如脚本、样式）保持不变，而我需要重置样式（例如清晰的背景、字体等）

有一种方法可以通过删除HTML元素来清除所有内容，这很好

document.documentElement.remove()

（方法二）

但是我怎样才能添加一个带有新内容的新 HTML 元素呢？

那么有没有办法使用方法 2 添加新的 HTML 元素，或者使用方法 1 清除样式、脚本等？

注意：Loading... 只是我想使用的示例文本，如果重要，实际内容可能是正确的 HTML。

Answer 1

试试

document.documentElement.remove();

var html = document.createElement('html');
var body = document.createElement('body');

html.appendChild(body);
document.appendChild(html);

document.body.innerHTML = `<span>Here your arbitrary html</span>`;

<div>x</div>

Answer 2

存储节点并显示加载

var head = document.head.innerHTML;
var body = document.body.innerHTML;
document.head.innerHTML = '';
document.body.innerHTML = 'Loading...';

撤消

document.head.innerHTML = head;
document.body.innerHTML = body;

这样您就可以显示正在加载的内容。