时间戳

首页 > 解决方案 > HTML 未在 div 内格式化生成错误

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

问题描述

我有一个 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"？

标签： javascripthtmlcoldfusion

解决方案

浏览器旨在本地解析该 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>已自动添加关闭。

推荐阅读