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