javascript - jQuery: Getting the "raw" content of an element

Question

I have this div:

<div id="test">
    {{? a && b || c < 0}}
        <div>Pece &alt; Love!</div>
    {{?}}
</div>

I neet do get its content just like it's reported above (che curly braces syntax is for a template engine).

Unfortunately, neither .html() nor .text() work:

// $('#test').text() 
{{? a && b || c < 0}}
    Pece &alt; Love!
{{?}}

.text() gets rid of tags

// $('#test').html()
{{? a &amp;&amp; b || c &lt; 0 }}
    <div>Pece &amp;alt; Love!</div>
{{?}}

.html() encodes the ampersands (and < >).

Any help? Thanks

score 8 · Accepted Answer

将模板存储为 HTML 不是一个好主意。<script>使用自定义 mimetype 将它们存储在标签内：

<script type="text/your-template" id="template">
    {{? a<b && b>c }}
        <div>Peace &amp; Love!</div>
    {{?}}
</script>

正如您所注意到的，将不是 HTML 的模板存储为 HTML 会产生不良结果：

您的原始标记已消失。当您查看该.innerHTML属性时，您看到的是浏览器将您的模板解释为是否是有效的 HTML，这可以更改它：http: //jsfiddle.net/ZFd6a/3/
a<b && b>c将变成ac，因为中间部分将被解释为一个元素。
杂散的小于和大于符号将变成字符实体。
您必须使用 HTML 字符实体。

您完全受制于浏览器的 HTML 解析器。当您将模板移动到<script>具有非 JavaScript 保留的 mimetype 的标签中时，您的模板将被视为字符串，这正是您想要的。

1 回答 1