我从来没有真正理解动态创建元素的行为背后发生了什么。这是一个例子:
$('.some-list').append('<div class="node"></div>');
现在存储在哪里? 如何访问 div 元素 $('.node')?
我知道 jQuery 的事件“on”方法,但我如何简单地访问和操作该元素?谢谢。
最佳答案
无论 $('.some-list')
本身是否存在于文档中,您都可以简单地使用:
$('.some-list')
// append returns the original collection ("$('.some-ist')"),
// not the newly-added element(s)
.append('<div class="node"></div>')
// so here we can use "find('.node')" to find the newly added
// element(s):
.find('.node')
如果 $('.some-list')
已经存在于文档中:
$('.some-list').append('<div class="node">The newly-added Element</div>').find('.node').css('color', '#f90');
.some-list div {
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-list">
<div>Existing node</div>
</div>
如果 $('.node')
元素不出现在文档中:
var someList = $('<div />', {
'class': 'some-list',
'html': '<div>Existing element</div>'
}),
newNode = someList.append('<div class="node">The newly-added Element</div>').find('.node');
console.log(newNode);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
引用资料:
关于javascript - 动态创建的元素存储在哪里以及如何访问它们?查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37684912/