有没有一种方法可以创建一个DOM对象，给定其呈现的字符串

Is there a way to create a DOM object, given its rendered string?

本文关键字：字符串 对象 方法 一种 一个 有没有 创建 DOM      更新时间：2023-09-26

有没有一种方法可以从整个字符串创建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等内容的字符串，并且你试图将其作为内部HTML放在临时创建的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];
};

您可以随时执行：

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

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

您正在查找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>';

您可以使用jQuery:

var myDiv = $('<div class="my-div">This is my div!</div>');
相关文章：