使用jquery追加方法[重复]答案

【问题标题】：Using jquery append method [duplicate]使用jquery追加方法[重复]
【发布时间】：2013-08-01 10:48:40
【问题描述】：

在我的代码中，我做了类似的事情

$("#jdoe").append("<h3>Test</h3>");

html

<html>
<head>
</head>
<body>
<div id="jdoe"></div>
</body>
</html>

它按预期工作（文本测试显示在 h3 中），我期待如果我在浏览器中查看源代码，我会看到类似

<html>
<head>
</head>
<body>
<div id="jdoe"><h3>Test</h3></div>
</body>
</html>

如果我的期望是错误的，请纠正我

【问题讨论】：

【解决方案1】：

您没有更改页面的来源，而是更改了 DOM。如果您使用首选浏览器的开发人员工具，您会在此处看到更改。

我认为您可以通过点击F12 获得适用于所有浏览器的开发者工具。

【讨论】：

【解决方案2】：

您的期望似乎是正确的......

但是要查看它的外观，您必须使用 Chrome 的 Inspect Element 之类的东西，而不是查看源代码。

但我建议这样做：

$("#jdoe").append($("<h3>").text("Text"));

【讨论】：

只是好奇，但是这样做比 OP 有什么好处？
如果需要，您可以最终将更多 jQuery 函数链接到它的末尾。例如，$("#jdoe").append($("<h3>").text("Test").css("color","#f00").on("click",doSomething));
不错。每天学些新东西。谢谢哥们！ :)
@War10ck - 真正的好处是它在内部使用了 document.createElement，因此它实际上创建了元素，而不是仅仅附加一个 HTML 字符串。创建实际的 DOM 元素是 IMO 一种更好的方法，但正确的语法应该是 $('<h3 />', {text:'Text'});
@adeneo 我最喜欢这种方法。谢谢解释的朋友。 :)

【解决方案3】：

您的“查看源代码”将与您从服务器获取的 html 相同。

任何使用 javascript/jquery 的操作都将不适用。

【讨论】：

【解决方案4】：

您需要访问控制台，而不是源。在谷歌浏览器中，这可以通过按Ctrl+Shift+J 来完成，从那里您可以访问其他开发者工具。

【讨论】：