Question

有没有办法从整个字符串创建DOM对象，而不仅仅是innerHTML？我有一个完整呈现DOM形式的字符串：

<some_tag_name class=... id=...>inner text</some_tag_name>     (1)

并希望直接创建一个DOM对象。我知道有办法：

e = document.createElement("some_tag_name")
e.innerHTML = ...
e.className = ...
e.id = ...

但是当我这样做时，我必须从我拥有的字符串（1）中提取innerhtml部分，并分析标记类型和所有属性，并分别将其分配给e。我想通过（1）形式的字符串完成所有这些操作。

修改

我遵循了答案，但它比起初看起来更棘手。问题是当你有一个代表tr，td等字符串的字符串，并且你试图把它作为innerHTML放到临时创建的div时，浏览器会自动添加外面的额外标签。以下是解决此问题的解决方法，其中c是字符串，e是创建的元素：

var cTagName = c.match(new RegExp('[a-zA-Z]+'))[0].toUpperCase();
var e = document.createElement("div");
    e.innerHTML = c;
    e = e.children[0];
//// When the type of `e' does not match what `c' expects, the browser
////    automatically modifies the type of c. The following is to undo this.
if(e.tagName.toUpperCase() != cTagName){
    e = document.createElement("table");
    e.innerHTML = c;
    e = e.children[0];
};
if(e.tagName.toUpperCase() != cTagName){
    e = document.createElement("tbody");
    e.innerHTML = c;
    e = e.children[0];
};
if(e.tagName.toUpperCase() != cTagName){
    e = document.createElement("tr");
    e.innerHTML = c;
    e = e.children[0];
};

Answer 1

您正在寻找outerHTML财产。

var el = document.createElement('tag');
document.body.appendChild(el); // The element must be appended to the DOM before
                               // setting outerHTML.  Otherwise, it will throw a
                               // NO_MODIFICATION_ALLOWED_ERR.
el.outerHTML='<some_tag_name class=... id=...>inner text</some_tag_name>';

鉴于Firefox在这一点上落后于时代，仅仅创建一个包装器div并设置其innerHTML可能更安全。

var el = document.createElement('div');
el.innerHTML = '<some_tag_name class=... id=...>inner text</some_tag_name>';

Answer 2

你总是可以这样做：

var div = document.createElement("div");
div.innerHTML = "<some> ... </some>"
var e = div.children[0];

（或者如果您使用的是jQuery，只需$("<some ... >")[0]）。

Answer 3

您可以使用jQuery：

执行此操作

var myDiv = $('<div class="my-div">This is my div!</div>');

有没有办法在给定渲染字符串的情况下创建DOM对象？

3 个答案: