单击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) ）