javascript - 单击 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

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