JavaScript动态创建div

时间:2011-10-16 16:44:15

标签: javascript dom styling

我正在尝试创建函数来创建div并设置样式,这里是代码:http://jsfiddle.net/NGnEd/5/

<script type="text/javascript">
var dom = {

    // Build the main button
    buildButton: function(){

        // Create new DOM element - div
        var button = document.createElement('div');

        // Set element attribute
        button.setAttribute('id', 'newElement');

        // Style the element
        button.style.width = "100px";
        button.style.height = "100px";

        // Add content
        button.innerHTML = 'new Element';

        // Print element
        document.body.innerHTML += button;
    }
}
</script>

<div onclick="dom.buildButton();">
   The first div
</div>

它应该创建元素,样式,添加内容并打印它。但它不起作用,我不知道原因。

任何帮助?

1 个答案:

答案 0 :(得分:4)

您无法将HTML元素添加到字符串中。而不是

document.body.innerHTML += button;

尝试

document.body.appendChild(button);

另外,如@Felix Kling所述,您错误地设置了JSFiddle,因此onclick="dom.buildButton"不起作用。这里的工作示例:

http://jsfiddle.net/pnHRp/1/