Question

使用jQuery最新版本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>

有人可以解释一下有什么区别：

$(document).ready(function () {
  $('.produit').append('<img src="img.png" alt="altimg" />');
});

和

$(document).ready(function () {
  $('.produit').append($('img').attr({ 'src':'img.png', 'alt':'altimg' }));
});

=＆GT;第一个代码可以工作，但是第二个代码会多次添加图像（完全七次）然后抛出一个JavaScript异常：

：“Cannot read property 'cycleW' of undefined”
：“next is undefined”

...

我是一名JavaScript初学者，我认为这两个代码会做同样的事情......

... 任何想法？

Answer 1

您的第二个代码有错误。

应该是：

$('<img>', ...);

要创建一个新元素，标签需要围绕它的尖括号！

如上所述，它选择页面上的每个现有图像标记，并将它们附加到.produit的每个实例。

理想情况下，您还应该使用$('<tag>')的地图版本，而不是之后调用.attr：

$('<img>', {src: 'img.png', alt:'altimg'}).appendTo('.produit');

Answer 2

'<img src="img.png" alt="altimg" />'是$('img').attr({ 'src':'img.png', 'alt':'altimg' })的字符串版本。

第二个代码块中没有循环，但如果有多个.produit个元素，那么它们都将附加一个图像元素。

更仔细地检查第二个代码块：

$('img')：这会创建一个img元素
.attr({ 'src':'img.png', 'alt':'altimg' })：这为新的img元素提供了src和alt属性。

如果允许用户输入成为元素的一部分，那么创建这样的DOM元素很有用。它有助于防止注入攻击，如果您只是编造了一串输入，用户可以更改页面的HTML。

更新

Alnitak非常好地观察到$('img')选择了DOM中的所有img元素，而$('<img />')实际上创建了一个img元素。

Answer 3

$（'img'）选择html中的所有图像，然后.attr设置属性。如果需要，可以选择img元素：

$('img[src=img.png][alt=altimg]')

但它不会创建新元素。它会在你的文件中选择一个。

至于你的.append调用，它会将你在参数中传递的html追加到元素中。

jQuery：在同一个类的许多div中添加一个元素

3 个答案:

更新