如何从字符串插入元素到html文档？

如何解决如何从字符串插入元素到html文档？

我在localStorage中存储了一串html代码，我想要将该字符串转换为文档并将该文档添加到现有页面中。到目前为止，我想到了：

var data = localStorage.getItem("data");
var frag = document.createRange().createContextualFragment(data);
document.body.appendChild(frag);

但是在页面中，文档片段只是一个简单的字符串。

编辑

我目前有html：

<html>
<head>
</head>
<body>
</body>
</html>

我出于测试目的保存到localStorage的字符串是Test

我想要得到的结果：


<html>
<head>
</head>
<body>
<p>Test</p>
</body>
</html>

我得到的结果：

<html>
<head>
</head>
<body>
"<p>Test</p>"
</body>
</html>

解决方法

如果本地存储中的文本是HTML，则可以使用insertAdjacentHTML将其插入到任何其他现有元素的开头，结尾，之前或之后。例如，要使用末尾文档正文中html中的HTML添加到文档中：

document.body.insertAdjacentHTML("beforeend",html);

示例：

const html = "<p>This is a new paragraph with <em>emphasized</em> text.</p>";
document.body.insertAdjacentHTML("beforeend",html);

<p>This paragraph is already on the page.</p>

如果您想完全删除该元素的当前内容并将其替换为HTML字符串中定义的内容，也可以使用现有元素的innerHTML属性：

someElement.innerHTML = html;

示例：

const html = "This is the new content for the paragraph,with <em>emphasized</em> text.";
document.getElementById("existing-paragraph").innerHTML = html;

<p id="existing-paragraph">This paragraph is already on the page.</p>

如果不是HTML，则可以将其放入元素（例如p或div）中，然后通过appendChild或insertBefore将其附加到某个位置，例如：

const p = document.createElement("p");
p.textContent = text;
document.body.appendChild(p);

示例：

const text = "This is plain text,so things like <this> don't get misinterpreted as HTML.";
const p = document.createElement("p");
p.textContent = text;
document.body.appendChild(p);

或仅使用createTextNode将其附加为原始文本：

const textNode = document.createTextNode(text);
document.body.appendChild(textNode);

示例：

const text = "This is plain text,so things like <this> don't get misinterpreted as HTML.";
const textNode = document.createTextNode(text);
document.body.appendChild(textNode);

还有更多on MDN可供探索。

在注释中，我们发现本地存储中的文本已经过HTML编码，如下所示：

Testing one two three

这意味着无论代码将文本放入本地存储中，然后再进行编码（因为本地存储不会这样做；它会忠实地存储并返回您提供的确切字符串）。最好的解决方案可能是更新该代码，以使其不执行该操作。

如果您无法更新该代码，则可以将该文本解释为HTML，只需执行两次：一次即可解释<，因此它们再次<，然后再次插入并解析结果HTML。最简单的方法是创建一个元素（例如div），设置其innerHTML，然后读取其textContent。这是一个示例：

示例：

const textFromLocalStorage = "&lt;p&gt;Testing &lt;em&gt; one two three&lt;/em&gt;&lt;/p&gt;";
const div = document.createElement("div");
div.innerHTML = textFromLocalStorage;
const decodedHtml = div.textContent;
document.body.insertAdjacentHTML("beforeend",decodedHtml);

<p>This paragraph is already on the page.</p>

appendChild的参数为html elements。当您向它发送一个字符串时，它将转换为textnode。您需要使用innerHTML方法

可能是吗？

const DomParser = new DOMParser();
let data = localStorage.getItem("data");
let frag = DomParser.parseFromString( data,'text/html').body.firstChild
document.body.appendChild(frag);

期望数据只有1个html元素（它可以具有许多html子元素）

示例代码

const DomParser = new DOMParser();
let data = '<p>Test</p>' // eq: localStorage.getItem("data");
let frag = DomParser.parseFromString( data,'text/html').body.firstChild;
document.body.appendChild(frag);

p {
  font-size: 30px;
  color: red;
}

如何从字符串插入元素到html文档？

如何解决如何从字符串插入元素到html文档？

解决方法

相关推荐