Question

我正在使用表单构建器网站。构建表单后，必须将其保存在数据库中。当用户从保存的表单列表中单击表单名称时，将从数据库中还原表单信息。我将恢复的变量之一是表单的结构。在javascript中我写了这些代码行：

var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>    </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);

document.write(prefix_content + dynamic_content + sufex_content  );

变量dynamic_content包含动态结构。问题是prefix_content和sufex_content显示为html，但dynamic_content在页面中写为文本。任何人都知道为什么或知道如何解决这个问题。

注意：当我在动态内容中静态地写入单引号之间的文本时，它显示为html而不是文本。

Answer 1

尝试这个：

var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>    </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);
var parser = new DOMParser();
var el = parser.parseFromString(dynamic_content, "text/html");

document.write(prefix_content + el + sufex_content  );

或者你也可以试试这个：使用jQuery

var dynamic_content=String(text_content);
var el = $.parseHTML( dynamic_content );
document.write(prefix_content + el + sufex_content  );

Answer 2

如果您将从数据库中检索到的内容视为明文而不是HTML，那么其HTML实体可能会在某个地方被转义。检查text_content变量的内容（例如，使用console.log(text_content)，如果您看到<div>而不是<div>之类的内容，请继续查看您的转发位置发生并将其删除或manually unescape。

Answer 3

var content = "<div style='color:red;'>TEST</div>";


var prefix ='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>TEST</title>\n</head>\n<body>\n';
var suffix ='\n</body></html>';
var all = prefix + content + suffix;
var parser = new DOMParser();
var doc = parser.parseFromString(all, "text/html");


console.log(doc.children[0].outerHTML);

而不是children[0]，您也可以选择：

doc.documentElement.outerHTML

结果：

<html lang="en-US"><head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div style="color:red;">TEST</div>
</body></html>

为什么HTML元素显示为文本？

3 个答案: