單擊Javascript將div附加到按鈕中

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

 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);

}

工作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);
    }

更新了jsfiddle

Answer 3

您只需要多一行代碼。 變量test01在內存中創建，但未添加到DOM 。 您必須將此新元素附加到DOM（即document.appendChild(test01) ）