使用 JavaScript 向 DOM 添加新元素

Question

我正在努力将新的“按钮”元素添加到我的“列表”中。 我试图附加或一些 els 但不起作用。 这对 li 来说并不常见。 如果你问为什么按钮父它是形式引导列表组

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

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

}