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

public function getQueryBuilderForEventRegistration()
{
    $queryBuilder = $this->createQueryBuilder('e')
        ->where('e.isActive', true)
        ->orderBy('e.surname', 'asc')
        ->addOrderBy('e.name', 'asc');

    return $queryBuilder;
}

File.exists? 'folder'

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

}

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 3

您只需要一行代码。变量test01在内存中创建，但未添加到DOM。您必须将此新元素附加到DOM（即document.appendChild(test01)）