0

简单地说，如何使用<html>这样的标签呈现代码片段

<div id="container">
   <div id="header_area"><tiles:insertAttribute name="header"  /></div>
   <div id="body_area"><tiles:insertAttribute name="body" /></div>
   <div id="sidebar_area"><tiles:insertAttribute name="sidebar" /></div>
   <div id="footer_area"><tiles:insertAttribute name="footer" /></div>
</div>

我找到了这段代码。但它为所有代码添加了结束标签/>

function encodePreElements() {
    var pre = document.getElementsByTagName('pre');
    for(var i = 0; i < pre.length; i++) {
        var encoded = htmlEncode(pre[i].innerHTML);
        pre[i].innerHTML = encoded;
    }
};

function htmlEncode(value) {
   var div = document.createElement('div');
   var text = document.createTextNode(value);
   div.appendChild(text);
   return div.innerHTML;
}

所以上面的代码会是这样的

<div id="container">
    <div id="header_area"><tiles:insertattribute name="header"></tiles:insertattribute></div>
    <div id="body_area"><tiles:insertattribute name="body"></tiles:insertattribute></div>
    <div id="sidebar_area"><tiles:insertattribute name="sidebar"></tiles:insertattribute></div>
    <div id="footer_area"><tiles:insertattribute name="footer"></tiles:insertattribute></div>
</div>

.innerHTML在 javascript 中正确呈现alert。那么我怎样才能像第一个那样渲染代码片段呢？执行此过程的简单方法是什么？

4

1 回答 1

0

好的，所以我假设在您的问题中，第一个引用的块嵌入在一个<pre>元素中，如下所示： <pre> <div id="container"> ... </div> </pre>

您正在尝试将其转换为： <pre> &lt;div ... </pre>

问题是当页面加载时，内容<pre>被加载到 DOM中。当您获取 的值时pre[i].innerHTML，它会返回一个准确表示 DOM 状态的值，但与您的原始 HTML 不同。

如果要保留页面中使用的确切 HTML，则需要在生成页面时对该 HTML 进行编码。当任何 JavaScript 可以访问内容时，为时已晚 - 原始 HTML 已经消失，您只剩下 DOM 内容。

于 2012-09-25T11:53:32.580 回答