Question

我想在一个没有任何结构的空白文档中创建新的DOM元素（我想也没有根节点）。基本上就像在浏览器中打开一个新选项卡并从零创建它的DOM。这可能吗？

我一直在搜索这里的所有答案，并且我已经尝试了过去使用其他人提出的所有问题。例如，我尝试使用：

var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
var body = dom.createElement("body");
body.innerHTML = "<p>GG WP</p>";
dom.firstChild.appendChild(body);

它没有用。接下来，我尝试过使用它：

var doc = document.implementation.createHTMLDocument("New Document");
var p = doc.createElement("p");
p.innerHTML = "Javascript is easy, but I still suck at it";

也没有工作。所以，我尝试使用DOMParser：

var parser = new DOMParser();
var doc = parser.parseFromString("<body>It still doesn't work.</body>", "text/html");

注意：我正在寻找一种在空文档中创建DOM元素的方法（最好在当前标签中）。因为每个人都可能有不同的新选项卡设置，所以我测试所有解决方案的方法是打开一个新选项卡并执行

document.write();

首先，只是为了确保当前的标签文档没有任何DOM结构。

更新：我在Mehdi（What other options for replacing entire HTML document via W3C DOM?）发布的链接中找到了答案。这有效：

document.open();
document.write('<html><body></body></html>');
document.close();

Answer 1

AFAIK，浏览器选项卡将始终具有文档对象，即使没有加载HTML也是如此。在大多数浏览器中，该文档将是HTML。我的步骤（在Chrome中）：

打开新标签
导航至about：blank
打开开发者控制台
执行：document.removeChild（document.documentElement）;
创建新元素：var docEl = document.createElement（＆＃34; foobar＆＃34;）;
追加新元素：document.appendChild（docEl）;

了解您定位的浏览器会有所帮助。例如，Chrome和Firefox有一个用于新标签的DOM树。你究竟是如何得到空文件的？

Answer 2

创建＆＃34;空白＆＃34;文件：

var doc = document.implementation.createDocument(null, '', null);

在该文档中创建新元素：

var el = doc.createElement("foo");

将元素附加到文档：

doc.appendChild(el);

在空白文档中创建DOM元素

2 个答案: