javascript - HTML 未在 div 内格式化生成错误

Question

我有一个 cfm (ColdFusion) 页面，其中显示 #userHTML#我的 div 中的变量内容。

<cfoutput>
    <div class="panel panel-default" style="margin-left: 20px; margin-right: 20px;">
        <div id="myDiv" class="panel-body">                
            #userHTML#
        </div>
    </div>

    <br/><br/>
    <div class="col-sm-8 col-sm-offset-2">
        <!-- Some Code Here -->
    </div>
</cfoutput>

有时 #userHTML#变量包含无效的 HTML。它可能包含打开 <div>未关闭的标签使我拥有的其余代码成为 <div class="col-sm-8 col-sm-offset-2">在顶部 div ( id="myDiv" ) 内

有没有办法让这个工作变得无关紧要 #userHTML#变量包含，它将始终在 div "myDiv" 中包含它的内容？

Answer 1

浏览器旨在本地解析该 HTML。如果您需要 XML，它将应用 XML 规则，并且导入格式不正确的 XML 将会出错。如果您使用 HTML，它会尽最大努力自动更正错误(所有 HTML 文档都是如此。

要实现这一点，您可以这样做(请参阅代码中的注释):

// Create a new HTML Document (DOM)
var doc = document.implementation.createHTMLDocument ('', 'html', null);
// Add the body
var body = document.createElementNS('', 'body');
// Place the body into the DOM
doc.documentElement.appendChild(body);
// Get body parsed / corrected
body.innerHTML = "<div>This is a test";

// Now place that content into your existing DOM
document.getElementById('test').innerHTML = body.innerHTML;
// Get rid of the extra DOM
doc = null;

<div id="test">Test Div</div>

如果您检查输出的 HTML，您将看到结束 </div>已自动添加。