Question

我正在努力添加新的＆＃34;按钮＆＃34;元素进入我的＆＃34;列表＆＃34;。我试图追加或者某些人，但是没有工作。对于李来说，这并不常见。如果你问为什么按钮为父，那就是表单bootstrap list-group

更新JS。 IT现在正在添加＆＃34;按钮，但不是核心。

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

JS

var jimg = new Jimp(width, height);
for (var x=0; x<width; x++) {
    for (var y=0; y<height; y++) {
        var index = (y * rimg.byteWidth) + (x * rimg.bytesPerPixel);
        var r = rimg.image[index];
        var g = rimg.image[index+1];
        var b = rimg.image[index+2];
        var num = (r*256) + (g*256*256) + (b*256*256*256) + 255;
        jimg.setPixelColor(num, x, y);
    }
}

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代码进行了清理后，OP给出的示例可能与此类似......

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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)

}

使用JavaScript将新元素添加到DOM中

4 个答案: