無法獲得動態添加的textarea的outerHTML / value

Question

這個小提琴https://jsfiddle.net/xa9m49zy/演示了你可以在渲染時獲得DOM中的textarea的outerHTML（帶有文本區域值），但是當textarea動態添加到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的值 ，但outerHTML不檢索值，它檢索元素和該元素的內容 。

textarea元素從其內容中獲取價值。

如果使用.text()方法為第二個textarea設置內容 ，則可以正常工作。

 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>