从javascript中创建DOM元素

Question

嗨我想了解如何使DOM elemnt，让我们说“div”形式我的数据对象。 我做了这样一个对象：

var div = { 

     style : { 
      width: Math.floor(Math.random() * 100), 
      height: Math.floor(Math.random() * 100), 
      position: "relative", 
      top:Math.floor(Math.random()*500) 
     }, 

     sayHi: function() { 
      alert("Hello"); 
     }, 

    } 

我现在需要做的，就是与这些CSS PARAMS，使其生活元素DOM？ 谢谢

Answer 1

试试这个

var DOMdiv = document.createElement("div"); 
for(var key in div) { 
    if(key === "style") { 
     for(var cssstyle in div[key]) { 
      DOMdiv.style[cssstyle] = div[key][cssstyle]; 
     } 
    } else { 
     DOMdiv[key] = div[key]; 
    } 
} 
document.body.appendChild(DOMdiv); 

但请记住，这个事业部现在有一个叫做sayHi()功能连接到它。没有事件处理程序启动或任何。如果你喜欢有一些事件处理程序，改变你的对象那样：

var div = { 

    [...] 


    onclick: function() { 
     alert("Hi"); 
    } 

}; 

Answer 2

要创建DOM元素，你可以使用document.createElement，像这样：

var elm = document.createElement('div'); 

这elm就已经有一个属性叫style;然后您可以分配给它的成员，例如：

elm.style.width = div.style.width + "px"; // Remember this is CSS, you need units 

一个for..in loop您div.style可能是有用的存在，但也一定要处理单位的事情。

将事件处理程序附加到它，你可以做分配的旧DOM0事情onXyz特性，如：

elm.onclick = div.sayHi; 

...这将使它运行在点击sayHi功能，但更现代的方式是通过addEventListener：IE的

elm.addEventListener('click', div.sayHi, false); 

旧版本没有addEventListener，但他们确实有它的MS-只前身attachEvent：

elm.attachEvent('onclick', div.sayHi); 

注意事件名称的差异，它没有第三个参数。

所有这些都是学术性的，除非你在页面上添加elm。

someOtherElement.appendChild(elm); 

探索更多：

• DOM2 Core
• DOM2 HTML
• DOM3 Core
:-)你可以通过获取网页上的另一元素的引用，然后调用 appendChild做
• HTML5 Web Application APIs

---

因为事情好像addEventListener/attachEvent浏览器不兼容等各种小东西，因为他们提供了大量的预包装实用的功能，很多人（包括我）使用JavaScript库，例如jQuery， YUI，Closure或any of several others来帮助这个东西。