JavaScript-创建元素并设置属性

我有这些函数来创建元素并更改它们的属性。你能给我一个如何修改它们的建议吗

function create(elem) {
return document.createElementNS ? document.createElementNS("http://www.w3.org/1999/    xhtml", elem) : document.createElement(elem);
}

function attr(elem, name, value) {
 if (!name || name.constructor != String) return "";
 name = {"for": "htmlFor", "class": "className"}[name] || name;
 if (typeof value != "undefined") {
  elem[name] = value;
  if (elem.setAttribute) elem.setAttribute(name, value);
 }
 return elem[name] || elem.getAttribute(name) || "";
}

我想得到这样的东西create（'div'，{'id'：'test'，'class'：'smth'}）

function create(elem, attr) {
 if (!attr) return document.createElementNS ? document.createElementNS("http://www.w3.org/1999/xhtml", elem) : document.createElement(elem);
 if (attr) {
  var el = document.createElementNS ? document.createElementNS("http://www.w3.org/1999/xhtml", elem) : document.createElement(elem);
  for (var i = 0; i < attr.length; i++) {
   attr(el, name[i], value[i]);
  }
  return el;
 }

函数创建（元素、属性）{
如果（！attr）返回document.createElements？document.createElements（“http://www.w3.org/1999/xhtml“，elem）：document.createElement（elem）；
如果（属性）{
var el=document.createElements？document.createElements（“http://www.w3.org/1999/xhtml“，elem）：document.createElement（elem）；
对于（变量i=0；i

}

---

请帮助=]

我建议使用类似jQuery的javascript框架。他们已经实现了这个功能

$("<div/>", {
    "class": "test",
    text: "Click me!",
    click: function(){
        $(this).toggleClass("test");
    }
}).appendTo("body");

$（“”{
“类”：“测试”，
文字：“点击我！”，
单击：函数（）{
$（此）.toggleClass（“测试”）；
}
}).附于（“主体”）；

您不能对这样的对象进行迭代：

for (var k in attrs) {
  if (attr.hasOwnProperty(k))
    attr(el, k, attrs[k]);
}

请注意，我将您的“attr”变量更改为“attrs”，这样它就不会隐藏您创建的“attr”函数。另外，在“attr”函数中，更改“undefined”测试：

---

为了更安全一点。与“==”和“！=”的比较尝试进行类型转换，如果您只是检查

未定义的

一句忠告：我个人更喜欢jquery方式，因为您可以直接将css和事件添加到元素中，并通过变量名而不是id引用对象，这是不必要的，但是。。。使用此方法创建输入元素时会出现问题，ie7和ie8不允许您设置type属性，因此在创建按钮、文本框等时要小心。例如，jquery将抛出“type属性无法更改”错误

---

如果要在ie9之前的浏览器中使用该代码，最好使用：而不是增加兼容性。

您做得很好，但我有一个解决方案，您应该尝试一下，这对我来说很有效，而且很快也很容易。它用于创建元素和设置属性功能

正如你提到的：

我想得到这样的东西

create（'div'，{'id'：'test'，'class'：'smth'}）

以下是解决方案：

function create(ele, attrs) {
    //create the element with a specified string:
    var element = document.createElement(ele);

    //create a for...in loop set attributes:
    for (let val in attrs) {
        //for support in the setAttrubute() method:
        if (element.setAttribute) {
            if (element[val] in element) {
               element.setAttribute(val, attrs[val]);
            } else {
                element[val] = attrs[val];
            }
        } else {
            element[val] = attrs[val];
        }
    }

    //return the element with the set attributes:
    return element;
}

这也适用于自定义属性，它的属性类似于
innerHTML
。
如果您还想确保我知道这是可行的，我已经测试了它，并将其记录在控制台上，并在HTML页面上看到它。我在Firefox上测试了这个

这里有一个
我认为，虽然这通常是一个不错的建议，但此人似乎正在构建自己的小框架，可能是为了从经验中学习。
function create(ele, attrs) {
    //create the element with a specified string:
    var element = document.createElement(ele);

    //create a for...in loop set attributes:
    for (let val in attrs) {
        //for support in the setAttrubute() method:
        if (element.setAttribute) {
            if (element[val] in element) {
               element.setAttribute(val, attrs[val]);
            } else {
                element[val] = attrs[val];
            }
        } else {
            element[val] = attrs[val];
        }
    }

    //return the element with the set attributes:
    return element;
}