Question

使用 JavaScript 向 DOM 添加新元素

2017-09-04

737

javascript dom

我正在努力将新的“按钮”元素添加到我的“列表”中。我试图附加或执行其他操作，但没有成功。这不是通常的 ul 到 li。如果您问为什么按钮父级是 bootstrap 列表组

更新 JS。它现在正在添加“按钮，但不是正确添加的。

     <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

知道了！

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)

>