html - Create Button with vanilla JavaScript - Stack Overflow

admin管理员组

文章数量:1415420

I need the following button created in vanilla javascript:

<button class="etmkug-14 SuUwW">
    <span class="etmkug-16 ctwFJG">Mark All Read</span>
</button>

Not sure about how to create and add the span:

var button = document.createElement('button');
button.setAttribute('class','etmkug-14 SuUwW');
button.setAttribute('style','margin-left: 10px;');
button.setAttribute('id','mark-all-read');
button.addEventListener('click', function(event){
    .
    .
    .
}
var span = document.createElement('span');
span.setAttribute('class','etmkug-16 ctwFJG');
span.innerHTML = 'Mark All Read';
button.appendChild(span);                // Is this how it's done????

I need the following button created in vanilla javascript:

<button class="etmkug-14 SuUwW">
    <span class="etmkug-16 ctwFJG">Mark All Read</span>
</button>

Not sure about how to create and add the span:

var button = document.createElement('button');
button.setAttribute('class','etmkug-14 SuUwW');
button.setAttribute('style','margin-left: 10px;');
button.setAttribute('id','mark-all-read');
button.addEventListener('click', function(event){
    .
    .
    .
}
var span = document.createElement('span');
span.setAttribute('class','etmkug-16 ctwFJG');
span.innerHTML = 'Mark All Read';
button.appendChild(span);                // Is this how it's done????

• javascript
• html

Share Improve this question Follow asked Jun 14, 2018 at 15:00 MB34MB34 4,4541313 gold badges6464 silver badges119119 bronze badges 3

• 1 Looks right to me. Have you tested it? – Ryan Wilson Commented Jun 14, 2018 at 15:02
• You have working code that you just needed to try – j08691 Commented Jun 14, 2018 at 15:03
• Actually, haven't had time to test it, yet... – MB34 Commented Jun 14, 2018 at 15:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Yes that is how it is done. You just need to add this line document.body.append(button);

var button = document.createElement('button');
button.setAttribute('class','etmkug-14 SuUwW');
button.setAttribute('style','margin-left: 10px;');
button.setAttribute('id','mark-all-read');
var span = document.createElement('span');
span.setAttribute('class','etmkug-16 ctwFJG');
span.innerHTML = 'Mark All Read';
button.appendChild(span);    
document.body.append(button);

If you're feeling lazy InnerHTML is your friend; Grab a container and append some HTML.

var container = document.getElementById('container');
container.innerHTML = container.innerHTML + '<button class="etmkug-14 SuUwW"><span class="etmkug-16 ctwFJG">Mark All Read</span></button>';

let newButton = document.createElement('button');
newButton.setAttribute("id", "myNewButton");
newButton.className = "myClassName";
newButton.innerText = "clickMe";
newButton.addEventListener("click", clickMe);
document.body.appendChild(newButton);
function clickMe(){
    console.log("Hi! I  am a new Button.");
}

本文标签： htmlCreate Button with vanilla JavaScriptStack Overflow