Append div in button on click Javascript

Question

Hi how to append div inside button on click this is my JavaScript:

function addLoader() {
    var div = document.createElement('div');
    div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
    var test01 = document.createElement('button');
    test01.appendChild(div);
    console.log(test01);
}

I want to add innerHTML inside button tags on click

<button onclick="addLoader(this);">testt </button>

It must be like this when function is finish :

<button>testt <div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div> </button>

Answer 1

 var btn = document.getElementById("addLoader"); if (btn) { btn.addEventListener('click', addLoader, false); } function addLoader() { var div = document.createElement('div'); div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>'; this.appendChild(div); } 

 <button id="addLoader">Test</button> 

Answer 2

HTML

// Added id attribute
<button onclick="addLoader();" id = "test01">testt </button>

JS

function addLoader() {
    var _div = document.createElement('div');
    _div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
    //append _div to button
    document.getElementById("test01").appendChild(_div);

}

Working jsfiddle

EDIT

This will append element to any button call addLoader on click

function addLoader(elem) {
        var _div = document.createElement('div');
        _div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
        elem.appendChild(_div);
    }

Updated jsfiddle

Answer 3

You just need one more line of code. The variable test01 is created in memory but not added to the DOM . You must append this new element to the DOM (ie. document.appendChild(test01) )