JavaScript - создать элемент и установить атрибуты

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

Я хочу получить нечто подобное

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" измените тест "undefined":

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.

Вот Демо

Answer 3

Совет: лично я предпочитаю способ jquery, потому что вы можете добавлять css и события непосредственно к элементу и ссылаться на объекты по имени переменной вместо идентификатора, но ... При использовании этого есть проблемыметод создания элементов ввода, т.е. 7 и ie 8 не позволяют вам установить свойство типа, поэтому будьте осторожны при создании кнопки, текстового поля и т. д., например, jquery выдаст ошибку «свойство типа не может быть изменено».

Если код должен использоваться в браузере до ie9, лучше всего использовать: document.createElement вместо того, чтобы увеличить совместимость.

Answer 4

Я бы порекомендовал javascript-фреймворк, такой как jQuery. Они уже реализовали эту функциональность.

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