CODEWITHSUNDEEP
javascriptclasscreateelement
Frostman
Frostman

Reputation: 53

Javascript Create an element with the various attributes

Can you create an element without acting every time like that?

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

For example

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

Upvotes: 3

Views: 4464

Answers (1)

user2437417
user2437417

Reputation:

Your "for example" code is very different from your code on top, but both need to be fixed.

First your initial code. That'll work except that you need to use .className to set the class. And of course you need quotation marks to create the strings.

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

Second, your bottom code won't work because you're not appending an element. You're appending the return result of .setAttribute(), which is undefined.

You can however chain .setAttribute() to the end of .appendChild() since it returns the appended element.

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

There are however issues in older versions of IE with setting the "class" using setAttribute(). So instead, set the property as in the first example.

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

Upvotes: 2

Related Questions