DOM appendChild

背景

近日將D blog遷移到用埋Blogger Server去host，於搬Travel Blog其間，就趁機執一執個Map effect的Javascript，等我可以用blogger的Layout中的Html/Javascript widget就可以加到同initialize到D visual effect.

那自然，一些牽涉到加一些新DOM element的event便改了在[body]入面行，如我有一個function做：

function createObject()

{

  var newDOMObj = document.createElement("div");

  ...

  document.body.appendChild(newDOMObj);

}

我就打算用下面的code去行呢個function

[body]

...

[script]createObject();[/script]

...

[/body]

自己一向用Firefox 3同Chrome做development，試過，無問題wor，點知一去到IE，無論係IE6定IE7，都出fatal error，連頁面都出唔到。

appendChild

經過Google一番後就發現，係[body]入面做appendChild時，因為個DOM structure跟本未ready，因此如果在那時就新加一些element落個DOM入面的話，就會有可能有問題(今次來說，就是IE有問題)。

Solution

自己因為工作上會用到YUI，結果我就用了YUI Event Utility 中的onDomReady去解決呢個問題，如：

[body]

...

[script]YAHOO.util.Event.onDOMReady(createObject);[/script]

...

[/body]

在更改以後，因為body.appendChild的動作會被延後到整個[body] tag render好後做 (實際上，等同將createObject()變成再body.onLoad時執行，因此問題就得以解決了。

最後，本人coding經驗尚未算深，如有錯漏，敬請指正~ 

註：因為Blogger唔可以係文章入面由〈ｂｏｄｙ〉呢個tag，因此我將< > 變成 [ ]