追加DIV點擊的Javascript

Question

嗨如何追加內上點擊按鈕格，這是我的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

編輯

這將追加元素的任何按鈕呼叫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>