使用JavaScript从对象创建DOM元素

Question

你好，我想了解如何从数据对象中创建DOM元素，比如说“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参数应用于DOM中的实时元素？ 谢谢。

- Karb

Answer 1

要创建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循环可能有用，但一定要处理好单位问题。

要附加事件处理程序，可以像这样做DOM0老式方法，即分配到onXyz属性中：

elm.onclick = div.sayHi;

...这将使其在单击时运行sayHi函数，但更现代的方法是通过addEventListener实现：

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

旧版本的IE浏览器不支持addEventListener，但它们有其 Microsoft 专属的前身attachEvent：

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

请注意事件名的不同，它没有第三个参数。

除非您在页面中添加elm，否则所有这些都是学术性的。 :-) 您可以通过获取页面上另一个元素的引用，然后调用appendChild来实现：

someOtherElement.appendChild(elm);

更多探索：

• DOM2核心
• DOM2 HTML
• DOM3核心
• HTML5 Web应用程序APIs

---

由于像addEventListener/attachEvent浏览器不兼容性以及其他各种小问题，加之它们提供了许多预打包的实用功能，很多人（包括我在内）使用JavaScript库，如jQuery、YUI、Closure或其他几个库来帮助处理这些问题。

- T.J. Crowder

---

elm.style = div.style 会起作用吗？只是好奇。当然，假设单位是正确的。 - Florian Margaine

@FlorianMargaine：我不认为会有问题，但我承认我从未尝试过。 - T.J. Crowder

我认为不会。Chrome的控制台显示elm.style是“CSSStyleDeclaration”，而div.style只是一个对象。我尝试使用jQuery的$.extend，希望它可以简单地填充样式的属性，但这并没有起作用:( - Connell

Answer 2

试试这个

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);

请记住，这个Div现在有一个名为sayHi()的函数附加到它上面。没有启动任何事件处理程序等。如果您想要一些事件处理程序，请像这样更改您的对象：

var div = {

     [...]


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

 };

- Amberlamps

---

或者使用自定义事件处理程序，如果您想要多个点击事件。或者只需使用jQuery™。 - Florian Margaine

应该使用 createElement，而不是仅仅的 create。代码如下：var DOMdiv = document.createElement("div"); - T.J. Crowder