jQuery outerHtml的解决方案 - 为什么先包装它，然后通过.html()提取内容？为什么不直接使用 $('id')

Question

我知道这是一个愚蠢的问题，但我就是不明白。为了获得div1 的整个元素，我们为什么使用它：

var html = $("<div />").append($("#div1").clone()).html();

而不仅仅是：

var html = $("#div1").clone();

甚至：

var html = $("#div1");

它完全有效！为什么？它也非常适合拖放(最后一个)，因为它不会像第一个和第二个那样创建副本。非常感谢您的帮助！我只是一个初学者。

Answer 1

理想情况下，您希望使用HTML，而不是使用JavaScript或jQuery进行操作。

原因是：

1. JavaScript 需要时间来处理脚本。
2. 拥有额外的JS代码，这不会增加任何价值将导致未来的维护噩梦。

jQuery是一个库，它为我们提供了使用本机/vanilla JavaScript的快捷方式。以下是这两个函数中的每一个正在执行的操作。

.clone()

创建匹配元素集的深层副本。

.append()

将参数指定的内容插入到匹配元素集中每个元素的末尾。

$("#div1") 与 JavaScript 的 document.getElementById() 方法/函数相同。

来自 Mozilla 开发者网络：

按元素的 ID 返回对元素的引用;ID 是一个字符串，可用于唯一标识元素，可在 HTML id 属性中找到。

如果你不需要制作jQuery链...

var html = $("<div />").append($("#div1").clone()).html(); 

。对于其他 Web 开发人员来说，如果您像这样使用 HTML，您可能会像一个更聪明的 Web 开发人员，他们可能会对您的工作进行代码审查......

<div id="div1"></div>
<div id="div2" class="blink"></div>

。和jQuery，像这样：

let obj1 = $("#div1");
let obj2 = $("#div2");
// Do something with obj1 & obj2 or the HTML for both DOM nodes.
obj1.html('Hello');
obj2.html('World');
obj1.addClass('red');
obj2.removeClass('blink');

然后你应该得到：

<div id="div1" class="red">Hello</div>
<div id="div2">World</div>

提示：不要仅仅为了混淆而编写无关的代码。你以后会很难阅读它。小代码就是好代码！它看起来很专业。

继续学习！