Question

简单地说，如何使用<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>

我找到了这个代码。但它为所有/>

添加了endtag

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中正确呈现。那我怎么能像第一个一样呈现代码片段呢？这个过程的简单方法是什么？

Answer 1

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

你正试图将其转换成它： <pre> <div ... </pre>

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

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

在代码片段HTML中呈现xml和html标记

1 个答案: