jQuery.append完成后如何调用函数？
这是一个例子：
$("#root").append(child, function(){
// Action after append is completly done
});
问题：追加复杂的DOM结构时，在追加函数回调中计算根元素的新大小是错误的。假设 DOM 还没有完全加载，只有添加的复杂 DOM 的第一个子节点。
【问题讨论】：
append() 只需要很少的时间。
标签： jquery
Jquery append 函数返回一个 jQuery 对象，因此您可以在末尾标记一个方法
$("#root").append(child).anotherJqueryMethod();
【讨论】：
$('#root').append(child);
// do your work here
Append 没有回调，这是同步执行的代码 - 没有不完成的风险
【讨论】：
$('#root').append(child).anotherMethod();
【讨论】：
这里有很多有效的答案，但没有一个能真正告诉你为什么它会这样工作。
在 JavaScript 中，命令一次执行一个，按照它们出现的顺序同步执行，除非您通过使用超时或间隔明确告诉它们是异步的。
这意味着您的 .append 方法将被执行，并且在该方法完成其工作之前不会执行任何其他操作（忽略任何可能存在的超时或间隔）。
总而言之，不需要回调，因为.append 将同步运行。
【讨论】：
我认为这很好回答，但这对于处理“subChild_with_SIZE”更具体一些（如果它来自父级，但你可以从它可能的位置调整它）
$("#root").append(
$('<div />',{
'id': 'child'
})
)
.children()
.last()
.each(function() {
$(this).append(
$('<div />',{
'id': $(this).parent().width()
})
);
});
【讨论】：
$.when($('#root').append(child)).then(anotherMethod());
【讨论】：
$.when 仅适用于那些返回承诺对象的对象
anotherMethod() 时才有效。它没有作为回调传递。
好吧，我在重新计算大小时遇到了完全相同的问题，经过数小时的头痛后，我不得不不同意 .append() 的行为严格同步。至少在谷歌浏览器中。请参阅以下代码。
var input = $( '<input />' );
input.append( arbitraryElement );
input.css( 'padding-left' );
在 Firefox 中可以正确检索 padding-left 属性，但在 Chrome 中它是空的。就像我想的所有其他 CSS 属性一样。经过一些实验后，我不得不以 10 毫秒的延迟将 CSS 'getter' 包装到 setTimeout() 中，我知道这很糟糕，但只有一个在 Chrome 中工作。
如果你们中有人知道如何更好地解决这个问题，我将不胜感激。
【讨论】：
.ready() 更好、更优雅的解决方案的答案。
我有另一个可能对某人有用的变体：
$('<img src="http://example.com/someresource.jpg">').load(function() {
$('#login').submit();
}).appendTo("body");
【讨论】：
...on('load', function(){ ... 一样使用它，请参见此处：stackoverflow.com/a/37751413/2008111
我知道这不是最佳解决方案，而是最佳实践：
$("#root").append(child);
setTimeout(function(){
// Action after append
},100);
【讨论】：
我在为移动设备编写 HTML5 代码时遇到了这个问题。某些浏览器/设备组合会导致错误，因为 .append() 方法没有立即反映 DOM 中的更改（导致 JS 失败）。
针对这种情况的快速解决方案是：
var appint = setInterval(function(){
if ( $('#foobar').length > 0 ) {
//now you can be sure append is ready
//$('#foobar').remove(); if elem is just for checking
//clearInterval(appint)
}
}, 100);
$(body).append('<div>...</div><div id="foobar"></div>');
【讨论】：
是的，您可以向任何 DOM 插入添加 回调 函数：$myDiv.append( function(index_myDiv, HTML_myDiv){
//....
return child
})
查看 JQuery 文档：http://api.jquery.com/append/
这是一个实用的类似示例：
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prepend_func
【讨论】：
.prepend() 方法替换为： $("p").prepend(function(n, pHTML){ return "This p 元素 (\""+pHTML+"\") 有索引 " + n + ". ";
我最近遇到了类似的问题。我的解决方案是重新创建集合。让我尝试演示一下：
var $element = $(selector);
$element.append(content);
// This Doesn't work, because $element still contains old structure:
$element.fooBar();
// This should work: the collection is re-created with the new content:
$(selector).fooBar();
希望这会有所帮助！
【讨论】：
对于图像和其他来源，您可以使用：
$(el).one('load', function(){
// completed
}).each(function() {
if (this.complete)
$(this).load();
});
【讨论】：
我遇到了同样的问题，并找到了一个简单的解决方案。 调用 append 函数后添加一个准备好的文档。
$("#root").append(child);
$(document).ready(function () {
// Action after append is completly done
});【讨论】：
使用MutationObserver 可以作为jQuery append 方法的回调：
我已经在another question解释过了，这次我只举现代浏览器的例子：
// Somewhere in your app:
var observeDOM = (() => {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
return function(obj, callback){
if( MutationObserver ){
// define a new observer
var obs = new MutationObserver(function(mutations, observer){
if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
callback(mutations);
});
// have the observer observe foo for changes in children
obs.observe( obj, { childList:true, subtree:true });
return obs;
}
}
})();
//////////////////
// Your code:
// setup the DOM observer (on the appended content's parent) before appending anything
observeDOM( document.body, ()=>{
// something was added/removed
}).disconnect(); // don't listen to any more changes
// append something
$('body').append('<p>foo</p>');
【讨论】：
<script> 标记之后或放置在底部，</body> 之前
尽管 Marcus Ekwall 关于追加的同步性是绝对正确的，但我也发现在奇怪的情况下，有时当下一行代码运行时浏览器并未完全呈现 DOM。
在这种情况下，shadowdiver 解决方案是正确的 - 使用 .ready - 但是将调用链接到原始附加会更整洁。
$('#root')
.append(html)
.ready(function () {
// enter code here
});
【讨论】：
我对这里的所有答案感到惊讶......
试试这个：
window.setTimeout(function() { /* your stuff */ }, 0);
注意 0 超时。这不是一个任意数字......据我所知（尽管我的理解可能有点不稳定），有两个 javascript 事件队列 - 一个用于宏事件，一个用于微事件。 “更大”范围的队列包含更新 UI（和 DOM）的任务，而微队列执行快速任务类型的操作。
还要意识到设置超时并不能保证代码完全按照指定的值执行。这实际上是将函数放入更高的队列（处理 UI/DOM 的队列），并且在指定时间之前不运行它。
这意味着将超时设置为 0 会将其放入 javascript 事件队列的 UI/DOM 部分，以便在下一个可能的机会运行。
这意味着 DOM 将使用所有先前的队列项进行更新（例如通过 $.append(...); 插入，并且当您的代码运行时，DOM 完全可用。
（p.s. - 我从 JavaScript Ninja 的秘密中学到了这一点 - 一本很棒的书：https://www.manning.com/books/secrets-of-the-javascript-ninja）
【讨论】：
setTimeout()，但不知道为什么。谢谢你的解释！
最干净的方法是一步一步地做。使用 each 函数遍历每个元素。追加该元素后，将其传递给后续函数以处理该元素。
function processAppended(el){
//process appended element
}
var remove = '<a href="#">remove</a>' ;
$('li').each(function(){
$(this).append(remove);
processAppended(this);
});
【讨论】：