Append ДИВ в кнопку на кнопку Javascript

Question

Привет как добавить DIV внутри кнопки на мыши это мой 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); 
} 

Я хочу добавить innerHTML внутри кнопки тегов по щелчку

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

Он должен быть таким, когда функция закончена:

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

Answer 1

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

Это добавит элемент любой кнопки вызова addLoader по щелчку

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 2

Вам просто нужна еще одна строка кода. Переменная test01 создана в памяти, но не добавлена ​​в DOM. Вы должны добавить этот новый элемент в DOM (т.е.. document.appendChild(test01))

Answer 3

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>