javascript - 无法获取动态添加的文本区域的 outerHTML/值

Question

这把 fiddle https://jsfiddle.net/xa9m49zy/演示了您可以在渲染时获取 DOM 中文本区域的 outerHTML(带有文本区域值)，但是当文本区域动态添加到 DOM 时，outerHTML 不包含文本区域值。它在 Firefox 和 Chrome 中不起作用，但它确实在 IE 和 Edge 中起作用。

HTML:

<textarea id="abc">
  Test
</textarea>

JS:

console.log($("#abc").get(0).outerHTML); //returns everything as expected
$("<textarea id='xyz'></textarea>").val("Test 2").appendTo("body");
console.log($("#xyz").get(0).outerHTML); //only shows <textarea></textarea> in non-MS browsers

这是怎么回事？这是 Chrome 和 Firefox 中的错误吗？

Answer 1

问题是您正在使用 .val() 设置第二个 textarea 的 value，但是 outerHTML 不检索值，它检索一个元素和该元素的内容。

textarea 元素从它们的 content 获取它们的值。

If you set the content for the second textarea using the .text() method, it works.

alert($("#abc").get(0).outerHTML); //returns everything as expected
$("<textarea id='xyz'></textarea>").text("Test 2").appendTo("body");
alert($("#xyz").get(0).outerHTML); //only shows <textarea></textarea> in non-MS browser

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="abc">
  Test
</textarea>