纯 JavaScript 的正确语法答案

【问题标题】：correct syntax for pure javascript纯 JavaScript 的正确语法
【发布时间】：2012-03-19 13:44:23
【问题描述】：

我有这个代码：

function render(str)
{
    var main = document.createElement('div');
    with(main.style)
    {
          //style stuff here
    }

    main.appendChild(document.createTextNode(str));
    document.body.appendChild(main);

    setTimeout(function(){
        try{
            document.body.removeChild(main);
        }   catch(error){}
    },5000);
}

这会在 div 中呈现一条消息，然后在 5 秒后隐藏。

如何向此表单添加输入文本和图像？因为我不确定如何使用纯 JS。

【问题讨论】：

您的代码已经展示了如何执行此操作，因为添加输入与添加 div 的方式相同（并且您已经添加了 div）。

标签： javascript syntax

【解决方案1】：

类似这样的：

输入

var input = document.createElement("input");
input.type = "text";
input.name = "person";

document.body.appendChild(input);

图片 img = document.createElement("img"); img.src = "logo.png";

document.body.appendChild(img);

在此处查看实时示例：

http://jsfiddle.net/sM2Vd/

不过，我建议学习和使用像 jQuery 这样的东西 - 这是一个很棒的库，让这样的事情变得轻而易举。

查看此 SOq 以了解类似情况 - 使用 jQuery 创建 input（在本例中为隐藏类型）元素并与纯 JavaScript 进行比较：

Jquery - Create hidden form element on the fly

【讨论】：

我可以使用 jQuery，但下一步是纯 JS :)
代码可以工作，但是我需要把之前创建的div放进去，有什么想法吗？
当然 - 只需附加到 main 而不是 document.body，这是一个更新的 jsFiddle：jsfiddle.net/sM2Vd/2
这就像一个魅力。感谢您的宝贵时间，继续摇滚吧！
我建议您删除有关 jQuery 的 cmets。 OP 显然是一个 jQuery 程序员，他问如何在没有 jQuery 的情况下做到这一点，因为他从来没有在没有 jQuery 的情况下进行过编程。

【解决方案2】：

而不是使用

with(main.style)
    {
          //style stuff here
    }

并进行多种样式操作，

一口气写出所有的样式分配

main.style.cssText='//这里的css样式字符串

【讨论】：