Javascript 如何从字符串向html文档中插入元素？_Javascript_Html_Dom

Javascript 如何从字符串向html文档中插入元素？

javascript html dom

Javascript 如何从字符串向html文档中插入元素？,javascript,html,dom,Javascript,Html,Dom,我在localStorage中存储了一个html代码字符串，我想要的是将该字符串转换为文档并将该文档添加到现有页面。到目前为止，我提出了： var data = localStorage.getItem("data"); var frag = document.createRange().createContextualFragment(data); document.body.appendChild(frag); 但是在页面中，文档片段只是一个简单的字符串编辑我目前拥

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

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

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

编辑

我目前拥有html：

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

我为测试目的保存到本地存储的字符串是

test

我想要得到的结果是：


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


试验

我得到的结果是：

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


“测试”

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

HTML

中的HTML添加到文档中：

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

例如：

const html=“这是一个带有强调文本的新段落。”；
document.body.insertAdjacentHTML（“beforeed”，html）
此段落已在页面上。的参数为。
当您向其发送字符串时，它将转换为textnode。
您需要使用方法
可能是这样吗
const DomParser = new DOMParser();
let data = localStorage.getItem("data");
let frag = DomParser.parseFromString( data, 'text/html').body.firstChild
document.body.appendChild(frag);

预期数据只有一个html元素（它可以有许多html子元素）
示例代码

const DomParser=new DomParser（）；
让data='Test'//eq:localStorage.getItem（“数据”）；
让frag=DomParser.parseFromString（数据'text/html'）.body.firstChild；
文件.正文.附件（frag）；

p{
字体大小：30px；
颜色：红色；
}
是本地存储中的文本HTML吗？是的，字符串由HTML组成。我忘了提到，当我使用insertAdjacentHTML时，我只得到[object DocumentFragment]@Nicolastadler-insertAdjacentHTML
直接获取字符串。不要创建文档片段，这是没有必要的。但我仍然在文档中获得原始文本。无论我尝试什么，它总是简单的text@NicolasStadler-在这种情况下，请使用a更新您的问题，包括您使用的确切文本insertAdjacentHTML
可以处理HTML，从答案中的示例可以看出。也许文本是HTML编码的？（例如，字符串是p>Testing em>one-two-three/em>/p>
或类似内容。）您可以通过代码控制台.log（localStorage.getItem（“data”））找到问题bc。我正在使用获取字符串，这可能是导致问题的原因？请阅读代码。我传递的不是字符串，而是文档片段。谢谢您的尝试，但它也会作为原始文本插入。@NicolasStadler，但您指出它是html！不是简单的文本我的意思是它将原始文本输出到文档中。@NicolasStadler这太令人困惑了，请显示一个本地存储数据的示例以及您使用的html结果expect@NicolasStadler我添加了一个示例代码来演示我的答案