javascript - 如果存在样式标签，jQuery 的 .html 函数将无法正确将内容写入文本区域

Question

这是基本设置:我们使用 JavaScript/jQuery 在文本区域内添加一些 HTML。测试 1 没有 <style>标签，而测试 2 则这样做。

<textarea"><div><style></style><span>Baseline</span></div></textarea>
<textarea id="test1"></textarea>
<textarea id="test2"></textarea>

<script>
    var test1HTML = '<div><span>Test1</span></div>';
    var test2HTML = '<div><style></style><span>Test2</span></div>';

    document.getElementById("test1").innerHTML = test1HTML;
    document.getElementById("test2").innerHTML = test2HTML;
</script>

以上内容按预期工作:所有文本区域都显示 HTML 代码。

但是如果我们使用 jQuery 的 .html函数添加内容，则测试2无法正确显示。它似乎将内容添加为实际元素，而不是文本。

$(document).ready(function(){
    $('#test1').html(test1HTML);
    $('#test2').html(test2HTML); // Causes some kind of problem
});

如果我们替换.html与 .text ，然后两个测试再次按预期工作。

使用 .html 的测试 2 发生了什么？为什么添加<style>标签更改方式.html添加内容？为什么所有其他方法都能正常工作？

(FWIW - 浏览器是 Chrome 39.0.2171.95 m)

Answer 1

jQuery 检查您提供给 .html() 的值对于 <script> , <style>和<link>标签(以及其他一些东西)。仅当它不包含它们时，才会继续设置 .innerHTML匹配元素的属性。

但是，如果值确实包含任何这些标记，则 jQuery 选择执行 $(element).empty().append(content);相反，它将文本值(节点)作为子元素附加。

这至少应该解释行为上的差异。

以下是源代码 (v1.11.1) 的摘录:

html: function( value ) {
    return access( this, function( value ) {
        var elem = this[ 0 ] || {};
        // ...ommitted
        // See if we can take a shortcut and just use innerHTML
        if ( typeof value === "string" && !rnoInnerhtml.test( value )) //...
            // ...
            elem.innerHTML = value;
            // ...
        }
        // ... else ... 
        this.empty().append( value );
        // .... end if
    }, null, value, arguments.length );
},

rnoInnerhtml正则表达式为:/<(?:script|style|link)/i,