Javascript Создайте элемент с различными атрибутами

Question

Можете ли вы создать элемент, не действуя каждый раз так?

var button = document.createElement('button'); 
button.class = codebuttons; 
button.value = Backup 

Например

document.querySelector('.right.Sub').appendChild(document.createElement("button").setAttribute("class", "codebuttons")); 

Answer 1

Ваш «например» код сильно отличается от кода на вершине, но оба должны быть исправлены.

Первый ваш начальный код. Это будет работать, за исключением того, что вам нужно использовать .className для установки класса. И, конечно, вам нужны кавычки для создания строк.

var button = document.createElement('button'); 
button.className = "codebuttons"; 
button.value = "Backup"; 

---

Во-вторых, ваш нижний код не будет работать, потому что вы не добавляя элемент. Вы добавляете результат возврата .setAttribute(), который равен undefined.

Вы можете, однако, скопировать .setAttribute() в конец .appendChild(), так как он возвращает присоединенный элемент.

document.querySelector('.right.Sub') 
     .appendChild(document.createElement("button")) 
     .setAttribute("class", "codebuttons"); 

---

Есть однако проблемы в более старых версиях IE с установкой "class" использованием setAttribute(). Поэтому вместо этого задайте свойство как в первом примере.

document.querySelector('.right.Sub') 
     .appendChild(document.createElement("button")) 
     .className = "codebuttons";