代码之家 › 专栏 › 技术社区 › heisenberg

为什么Append在这里工作而Add不工作?

html jquery javascript

heisenberg · 技术社区 · 15 年前

这个问题是在一个叫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>

.append(内容) 内容

.add(html) html格式

它似乎我应该看到两个文本块都被添加到div中,但是实际上只有使用append添加的文本块被添加,所以页面看起来像:

追加中的新文本

有人能解释一下为什么会这样吗?

4 回复 | 直到 15 年前

Nick Craver 15 年前

.add(html) 到jQuery对象 (此时它是一个文档片段),它不会将其插入DOM:)

.append() 是为了一个不同的目的,实际上 将内容添加到匹配的元素 作为他们的孩子 .add()

如果你这样做了, .add() 会产生你想象中的效果:

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

获取 id="div1"
向jQuery对象的匹配元素集添加一个新的文档片段,它现在有2个元素长
附加物 二者都 <body>

Mark Schultheiss 15 年前

gnarf 15 年前

.add() 将匹配元素添加到 匹配元素集

var $div = $("#div");

console.log($div.add('.myClass'));

#div 和 .myClass . 它基本上将两个jQuery对象添加在一起。它不会将这些对象追加/插入到DOM中。

如果您将HTML传递给 .add() 您将最终创建这些元素并将它们添加到add返回的集合中。

Jason McCreary 15 年前

add 不会将元素/html添加到页面,而是将其添加到jQuery对象集。查看文档: http://api.jquery.com/add/ . 它有一个关于这个的段落。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前