gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:34:13 25 4
gpt4 key购买 nike

我知道这是一个愚蠢的问题,但我就是不明白。要获取 div1 的整个元素,我们为什么要使用它:

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

而不仅仅是:

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

甚至:

var html = $("#div1");

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

最佳答案

理想情况下,您希望使用 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>

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

继续学习!

关于javascript - jQuery outerHtml 的解决方案 - 为什么先包装它然后通过 .html() 提取内容?为什么不直接使用 $ ('id' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45115305/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com