Question

我有这些功能来创建元素并更改其属性。你能就如何修改它们给我一些建议吗？

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

我希望得到类似创建（'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;
 }

}

请帮助=]

Answer 1

你无法遍历这样的对象：

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

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

if (typeof value !== undefined)

要安全一点。与“==”和“！=”进行比较会尝试进行类型转换，如果您只是检查undefined，则无需这样做。

Answer 2

您做得不错，但是我为您提供了一个解决方案，您应该尝试对我有用的解决方案，它既快捷又容易。它用于创建元素和设置属性的功能。

您提到的：

我想得到像这样的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上进行了测试。

这里是Demo

Answer 3

我会推荐像jQuery这样的javascript框架。他们已经实现了这个功能。

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

Answer 4

一条忠告：我个人更喜欢jquery方式，因为你可以直接将css和事件添加到元素中，并通过var名称而不是id来引用对象，但是......使用它时会出现问题创建输入元素的方法，即7＆amp; ie8不允许你设置类型属性，所以当创建按钮，文本框等时要小心，例如，jquery会抛出“type属性无法更改”的错误。

如果要在ie9之前在浏览器中使用该代码，最好使用：document.createElement来提高兼容性。

JavaScript - 创建元素和设置属性

4 个答案: