如果有样式标签，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

您应该使用 .val 方法：

$('#test1').val(test2HTML);

Answer 2

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,

如果有样式标签，jQuery 的 .html 函数不会将内容正确写入文本区域

jQuery's .html function doesn't write content to textarea correctly if there is a style tag

html

javascript

jquery