JavaScript 动态创建 div

发布于 2024-12-10 05:03:31 字数 847 浏览 1 评论 0原文

我试图创建函数来创建 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>

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

有什么帮助吗?

I was trying to create function to create a div and style it, here is the code: 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>

It is supposed to create element, style it, add content and print it. But it's not working, I don't know the reason.

Any help?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

天涯离梦残月幽梦 2024-12-17 05:03:31

您无法将 HTML 元素添加到字符串中。 正如 @Felix Kling 所指出的,您没有正确设置 JSFiddle,而是

document.body.innerHTML += button;

错误地设置了“Try

document.body.appendChild(button);

Also”,因此 onclick="dom.buildButton" 不起作用。此处的工作示例:

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

You can't add an HTML element to a string. Instead of

document.body.innerHTML += button;

Try

document.body.appendChild(button);

Also, as noted by @Felix Kling, you set up the JSFiddle incorrectly, so onclick="dom.buildButton" does not work. Working example here:

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文