Как добавить элемент body в пустой документ DOM? - PullRequest
12 голосов
/ 04 ноября 2011

У меня есть эта строка, которая представляет тело страницы, которое я хотел бы проанализировать для некоторых элементов. Я считаю (не стесняйтесь противоречить мне), лучший способ сделать это - создать пустой документ, затем добавить тело и использовать стандартные методы JS, чтобы получить то, что я хочу.
Но я не могу добавить тело к документу. В chrome следующий код завершается с ошибкой в ​​строке 2 с NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7.

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

Есть ли способ добиться того, чего я хочу?

Ответы [ 3 ]

8 голосов
/ 07 декабря 2016

Поскольку мы на несколько лет дальше первоначально принятого ответа, я хотел бы дать более современный ответ.

В Firefox 50.0.2 вы можете сделать это:

document.body = document.createElement("body");
document.body.innerHTML = "<p>Hello World!</p>";

Здесь тело создается и напрямую назначается «document.body».Некоторое чтение (https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2) заставило меня понять, что атрибут документа "body" может быть либо "нулевым", либо содержать объект типа "body" или (не рекомендуется) "frameset".

Следующее не работает, т.е. создает пустую страницу, потому что отсутствует присвоение "document.body":

var body = document.createElement("body");
body.innerHTML = "<p>Hello World!</p>";

Вместо document.body = body; вы можете сделать это: document.documentElement.appendChild(body);, тогда как document.firstChild.appendChild(body); выдает ошибку («HierarchyRequestError: Узел не может быть вставлен в указанную точку иерархии»).

Можно утверждать, является ли добавление абзаца путем оценки innerHTML лучшим способом, ноэто другая история.

2 голосов
/ 11 февраля 2015

Я заметил, что в последних версиях Chrome ответ Антуана не работает - вы получаете пустую страницу. Это, однако, работает в Chrome:

var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
var body = dom.createElement("body");
dom.documentElement.appendChild(body);

// set timeout is needed because document.body is created after the current continuation finishes
setTimeout(function() {    
  document.body.innerHTML = "Hi"
},0)
0 голосов
/ 04 ноября 2011

Невозможно редактировать innerHTML корневого элемента документа, но это возможно для дочернего узла. Итак, это работает:

    var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
    var body = dom.createElement("body");
    body.innerHTML = "<p>hello world</p>";
    dom.firstChild.appendChild(body);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...