gpt4 book ai didi

javascript - 为什么在这里 Append 起作用而 Add 不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 14:24:26 24 4
gpt4 key购买 nike

在一位名叫 patrick 的用户指出我今天早些时候给出的答案中的错误后,我想到了这个问题。

给定以下 html:

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script type="text/javascript">
$(function(){
$('#div1').add('<p>new text from add</p>');
$('#div1').append('<p>new text from append</p>');
});
</script>

</head>
<body>
<div id="div1">
original text</div>
</body>
</html>

和 jQuery api 文档:

.append(内容)content 要插入到匹配元素集中每个元素末尾的元素、HTML 字符串或 jQuery 对象。

.add(html)html 要添加到匹配元素集中的 HTML 片段。

似乎我应该看到两个文本 block 都被添加到 div 中,但实际上只添加了使用 append 添加的文本 block ,因此页面看起来像:

original text

new text from append

谁能给我解释一下这是为什么?

最佳答案

.add(html) 只是将元素添加到 jQuery 对象(此时它是一个文档片段),它不会将它插入到 DOM 中:)

.append() 是为了不同的目的,它实际上将内容添加到匹配的元素,作为它们的子元素,而.add()它是一个兄弟,并且只在那个 jQuery 对象中,还不在 DOM 中。

例如,如果您这样做, .add() 大致会产生您所想的效果:

$('#div1').add('<p>new text from add</p>').appendTo('body');

这会执行以下操作:

  • 获取 id="div1"通过选择器的元素
  • 向该 jQuery 对象的匹配元素集中添加一个新的文档片段,它现在是 2 个元素长
  • 将它们附加到<body>

关于javascript - 为什么在这里 Append 起作用而 Add 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3313446/

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