javascript - 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 代码，这不会增加任何值(value)，这将导致维护的噩梦。

jQuery是一个库，它为我们提供了使用原生/普通 JavaScript 的捷径。以下是这 2 个函数的作用。

.clone()

Create a deep copy of the set of matched elements.

.append()

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

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

来自Mozilla Developer Network :

Returns a reference to the element by its ID; the ID is a string which can be used to uniquely identify the element, found in the HTML id attribute.

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

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

...如果您像这样使用 HTML，对于可能对您的工作进行代码审查的其他 Web 开发人员，您将看起来像一个更聪明的 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>

提示:不要编写无关的代码来混淆它。以后你会很难阅读它。较小的代码是好的代码!看起来很专业。

继续学习!