javascript - DOM 元素在添加到 DOM 树后是否立即可用？

Question

在将一大段 HTML 动态附加到文档后（示例使用 jQuery，但问题对所有 JavaScript 都有效），我可以假设附加的元素在之后立即可用吗？

$('#content').append('<p>Content</p><button id="newbutton">New</button><p>Some more content</p>');
var forExample = $('#newbutton').width(); // Element available?

在我的特殊情况下，创建单个元素是不切实际的。此外，这是很久以前的the document.ready事件。

Answer 1

是的，它们立即可用。例如，jQuery 将返回正确的对象，并且您可以将元素绑定到它们上。

但是由于它们不会在脚本运行时呈现，因此并不总是立即进行大小计算，因此如果您需要对象的尺寸，您可能需要这样做

setTimeout(function(){
    var forExample = $('#newbutton').width();
    // use size
}, 0); // 0 is enough to tell the engine to render before it executes the callback

请注意，如果您进行增量调试（脚本并不是真正“运行”），浏览器的行为会有所不同。

Answer 2

是的，它是直接可用的。你可以在 1 分钟内用小提琴测试它... http://jsfiddle.net/adxbH/

var newButton = document.createElement('button');

newButton.id = 'newbutton';
newButton.innerHTML = 'button_test';
document.body.appendChild(newButton);
var forExample = document.getElementById('newbutton');
alert(forExample.offsetWidth);​

如您所见，不使用 jQuery 也很容易。