JQuery 如何在创建的元素中创建元素
JQuery How to create element in created element
有一个code I'm working on - https://jsfiddle.net/md_bender/pj6a1akz/3/。我需要创建新元素并将它们附加到现有元素 ul。创建元素并附加一切都可以。
但是我不知道如何在创建的元素中创建子元素。我需要创建
<img src="path"/>
在 div 我之前创建的脚本中。一定是这样
<div class="img-w js-popup">
<img src="path"/>
</div>
<a href="delete.php">Delete</a>
但我唯一能做的就是创建 div
的下一个同级
<div class="img-w js-popup"></div>
<img src="path"/>
<a href="delete.php">Delete</a>
谁能帮我解决我的问题?
您可以先将 img
附加到 div
,然后再将 div 附加到 li
。您也可以像这样编写相同的代码 Fiddle
$('<li/>')
.append($('<div/>', {
'class': 'img-w js-popup',
}).append($('<img/>', {
'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
})))
.append($('<a/>', {
href: 'delete.php',
text: 'Delete'
}))
.appendTo('ul');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div>
<img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" />
</div>
<a href="delete.php">Delete</a>
</li>
</ul>
问题是因为您的 append()
调用是针对 li
本身,而不是您刚刚添加的 div
。试试这个:
var $div = $('<div/>', {
'class': 'img-w js-popup'
});
$('<img/>', {
'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
}).appendTo($div)
$('<li/>').append($div).append($('<a/>', {
href: 'delete.php',
text: 'Delete'
})).appendTo('ul');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li>
<div>
<img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" />
</div>
<a href="delete.php">Delete</a>
</li>
</ul>
话虽如此,您正在使用最冗长的创建方法 HTML。当您对所有属性进行硬编码时,只需提供纯字符串即可简化它 - 或者甚至只需克隆前面的 li
并附加它。
如果不需要单个 DOM (li, div, img),则更容易创建静态字符串并将整个附加到列表中,就像那样(记住反斜杠):
$('ul').append("<li><div><img src=\"//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80\" alt=\"\"/></div><a href=\"delete.php\">Delete</a></li>");
$('<li/>')
.append($('<div/>', {
'class': 'img-w js-popup',
}))
.append($('<div/>', {
'id': 'idOFDiv'
}))
.append($('<a/>', {
href: 'delete.php',
text: 'Delete'
}))
.appendTo('ul');
$("#idOFDiv").append($('<img/>', {
'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
}));
有一个code I'm working on - https://jsfiddle.net/md_bender/pj6a1akz/3/。我需要创建新元素并将它们附加到现有元素 ul。创建元素并附加一切都可以。 但是我不知道如何在创建的元素中创建子元素。我需要创建
<img src="path"/>
在 div 我之前创建的脚本中。一定是这样
<div class="img-w js-popup">
<img src="path"/>
</div>
<a href="delete.php">Delete</a>
但我唯一能做的就是创建 div
的下一个同级<div class="img-w js-popup"></div>
<img src="path"/>
<a href="delete.php">Delete</a>
谁能帮我解决我的问题?
您可以先将 img
附加到 div
,然后再将 div 附加到 li
。您也可以像这样编写相同的代码 Fiddle
$('<li/>')
.append($('<div/>', {
'class': 'img-w js-popup',
}).append($('<img/>', {
'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
})))
.append($('<a/>', {
href: 'delete.php',
text: 'Delete'
}))
.appendTo('ul');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div>
<img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" />
</div>
<a href="delete.php">Delete</a>
</li>
</ul>
问题是因为您的 append()
调用是针对 li
本身,而不是您刚刚添加的 div
。试试这个:
var $div = $('<div/>', {
'class': 'img-w js-popup'
});
$('<img/>', {
'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
}).appendTo($div)
$('<li/>').append($div).append($('<a/>', {
href: 'delete.php',
text: 'Delete'
})).appendTo('ul');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li>
<div>
<img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" />
</div>
<a href="delete.php">Delete</a>
</li>
</ul>
话虽如此,您正在使用最冗长的创建方法 HTML。当您对所有属性进行硬编码时,只需提供纯字符串即可简化它 - 或者甚至只需克隆前面的 li
并附加它。
如果不需要单个 DOM (li, div, img),则更容易创建静态字符串并将整个附加到列表中,就像那样(记住反斜杠):
$('ul').append("<li><div><img src=\"//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80\" alt=\"\"/></div><a href=\"delete.php\">Delete</a></li>");
$('<li/>')
.append($('<div/>', {
'class': 'img-w js-popup',
}))
.append($('<div/>', {
'id': 'idOFDiv'
}))
.append($('<a/>', {
href: 'delete.php',
text: 'Delete'
}))
.appendTo('ul');
$("#idOFDiv").append($('<img/>', {
'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
}));