用JavaScript添加新元素到DOM中

Question

我很努力在我的「列表」中添加新的「按鈕」元素。我試圖追加或某些els，但不起作用。對李來說這並不常見。如果你問爲什麼button父母它是形式bootstrap列表組

UPDATE JS。它是現在加入「按鈕，但沒有corectlly

 <div class="list-group"> 
        <button type="button" class="list-group-item"> 
         <ul class="desc"> 
          <li class="t-desc50">Add Device</li> 

          <li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li> 
         </ul> 
        </button> 
        <button type="button" class="list-group-item" id="new-item> 
          <ul class="desc"> 
           <li class="t-desc">Lamp</li> 
           <li class="t-desc2">5 kwH</li> 
           <li class="t-desc3"><label class="switch"> 
             <input type="checkbox"> 
             <span class="slider round"></span> 
             </label></li> 
          </ul> 
         </button> 
        <button type="button" class="list-group-item" id="new-item> 
           <ul class="desc"> 
            <li class="t-desc">AC</li> 
            <li class="t-desc2">5 kwH</li> 
            <li class="t-desc3"><label class="switch"> 
              <input type="checkbox"> 
              <span class="slider round"></span> 
              </label></li> 
           </ul> 
          </button> 
       </div> 

JS

document.querySelector('.fa-plus').addEventListener('click', addItem 

); 

    function addItem() { 
var list = document.getElementById("list-group"); 

var li = document.createElement("button"); 
li.setAttribute('id', li); 
li.appendChild(document.createTextNode(li)); 
list.appendChild(li); 
} 

Answer 1

如果你想一個元素添加到DOM，你可以使用：

var element = document.createElement(tagName);

https://developer.mozilla.org/fr/docs/Web/API/Document/createElement

然後追加你的元素。

如果需要，可以將事件偵聽器添加到element，然後添加類。

評論答案

你需要的代碼可能是類似的東西：

function addItem() { 
    var list = document.getElementById('list-group') 

    //Button 
    var button = document.createElement('button'); 
    button.classList.add("list-group-item"); 

    //Ul 
    var ul = document.createElement('ul'); 
    ul.classList.add("desc"); 

    //li 
    var liFirst = document.createElement('li'); 
    var liSecond = document.createElement('li'); 
    var liThird = document.createElement('li'); 
    liFirst.innerHTML = "Lamp" 
    liSecond.innerHTML = "5 kwH" 

    //Label 
    var label = document.createElement('label'); 
    label.classList.add("switch"); 
    var input = document.createElement('input'); 
    input.type = 'checkbox'; 
    var span = document.createElement('span'); 
    span.classList.add("slider"); 
    span.classList.add("round"); 

    label.append(input) 
    label.append(span) 

    liThird.append(label) 

    ul.append(liFirst) 
    ul.append(liSecond) 
    ul.append(liThird) 
    button.append(ul) 

    list.append(button) 
} 

Answer 2

你需要傳遞函數作爲參數，而不是調用它的：

// wrong: 
document.querySelector('.fa-plus').addEventListener('click', addElement()); 

// right: 
document.querySelector('.fa-plus').addEventListener('click', addElement); 

addEventListener需要一個回調函數，如果你首先調用該函數，那麼你將函數的結果作爲參數發送這是錯誤的。

您需要傳遞addElement函數，以便addEventListener調用它。

Answer 3

標記和代碼中都有幾個語義錯誤。首先，<button type="button" class="list-group-item" id="new-item>錯過了雙引號。其次，不應該使用id兩倍作爲OP的例子id="new-item。在第三addEventListener錯過了第三個參數。

除此之外，如果不是不可能捕獲fa-plus分類<i/>元素上的任何點擊事件，你應該使用整個按鈕來代替......這就是按鈕的用途。

此外，人們可能會反思如何檢索/查詢想要添加新元素的結構。我會建議一種更通用的方法，從單擊事件發生的結構中檢索最頂級的組合父項，因此可以使用多於list-group分類元素。

已經消毒的OP給了例子則可能類似於此代碼...

function getClosestParentByClassName(elm, className) { 
 
    while (elm && !elm.classList.contains(className)) { 
 
     elm = elm.parentNode; 
 
    } 
 
    return elm; 
 
} 
 

 
function addItem(evt) { 
 
    //console.log(evt.currentTarget); 
 
    var 
 
     groupParent = getClosestParentByClassName(evt.currentTarget, 'list-group'), 
 
     itemBlueprint = groupParent && groupParent.querySelector('.list-group-item.new-item'), 
 
     newGroupItem = (itemBlueprint && itemBlueprint.cloneNode(true)) || createDefaultItem(); 
 

 
    //console.log(groupParent, itemBlueprint, newGroupItem); 
 

 
    if (newGroupItem) { 
 
     // do whatever needs to be done in order to place the right content into this structure. 
 

 
     groupParent.appendChild(newGroupItem); 
 
    } 
 
} 
 

 

 
getClosestParentByClassName(document.querySelector('.fa-plus'), 'list-group-item').addEventListener('click', addItem, false); 
 

 

 
function createDefaultItem() { 
 
    var 
 
     renderContainer = document.createElement('div'); 
 

 
    renderContainer.innerHTML = [ 
 
     '<button type="button" class="list-group-item new-item">' 
 
    ,  '<ul class="desc">' 
 
    ,   '<li class="t-desc">@missing t-desc</li>' 
 
    ,   '<li class="t-desc2">@missing t-desc2</li>' 
 
    ,   '<li class="t-desc3">' 
 
    ,    '<label class="switch">' 
 
    ,     '<input type="checkbox">' 
 
    ,     '<span class="slider round"></span>' 
 
    ,    '</label>' 
 
    ,   '</li>' 
 
    ,  '</ul>' 
 
    , '</button>' 
 

 
    ].join(''); 
 

 
    return renderContainer.querySelector('button'); 
 
}

.as-console-wrapper { max-height: 100%!important; top: 0; }

<div class="list-group"> 
 
    <button type="button" class="list-group-item"> 
 
     <ul class="desc"> 
 
      <li class="t-desc50">Add Device</li> 
 
      <li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li> 
 
     </ul> 
 
    </button> 
 
    <button type="button" class="list-group-item new-item"> 
 
     <ul class="desc"> 
 
      <li class="t-desc">Lamp</li> 
 
      <li class="t-desc2">5 kwH</li> 
 
      <li class="t-desc3"> 
 
       <label class="switch"> 
 
        <input type="checkbox"> 
 
        <span class="slider round"></span> 
 
       </label> 
 
      </li> 
 
     </ul> 
 
    </button> 
 
    <button type="button" class="list-group-item new-item"> 
 
     <ul class="desc"> 
 
      <li class="t-desc">AC</li> 
 
      <li class="t-desc2">5 kwH</li> 
 
      <li class="t-desc3"> 
 
       <label class="switch"> 
 
        <input type="checkbox"> 
 
        <span class="slider round"></span> 
 
       </label> 
 
      </li> 
 
     </ul> 
 
    </button> 
 
</div>

Answer 4

得到它！

function addItem() { 
var list = document.getElementById('list-group') 
var button = document.createElement('button'); 
var ul = document.createElement('ul'); 
var liFirst = document.createElement('li'); 
var liSecond = document.createElement('li'); 
var liThird = document.createElement('li'); 

button.classList.add("list-group-item"); 
ul.classList.add("desc"); 
liFirst.classList.add("t-desc") 
liSecond.classList.add("t-desc2") 
liThird.classList.add("t-desc3") 
liFirst.innerText = 'TV' 
liSecond.innerText = '5kwh' 
liThird.innerHTML = `<label class="switch"> 
<input type="checkbox"> 
<span class="slider round"></span> 
</label>` 

ul.append(liFirst) 
ul.append(liSecond) 
ul.append(liThird) 
button.append(ul) 

list.append(button) 

}