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也很容易。

将DOM元素添加到DOM树后立即可用吗？

2 个答案: