Question

我有一个带有几个按钮的应用程序，每个按钮都有一个元素，按钮一个有一个＆＃34; banana＆＃34;并且按钮2有一个＆＃34; apple＆＃34;，当用户点击这些按钮时，应该将新的li元素添加到列表中。这是一个JSFiddle，其中包含了我遇到的问题的一个例子：

https://jsfiddle.net/ejha3q94/

每次点击只创建1个li，并且元素只会添加到同一个li上。

 var newElement = document.createElement("li");
 var newElText = document.createTextNode ("");

 document.getElementById("itemOne").addEventListener("click", function() {
  newElText = document.createTextNode("Banana");
   document.getElementById("list").appendChild(newElement).appendChild(newElText);

 });

 document.getElementById("itemTwo").addEventListener("click", function() {
  newElText = document.createTextNode("Apple");
    document.getElementById("list").appendChild(newElement).appendChild(newElText);

  });

我怎样才能使每次点击都是仅使用Javascript的新li元素？

Answer 1

您无法通过重新分配元素来重复使用元素。每次要将新元素插入DOM时，都必须创建一个新元素。

此解决方案为您的过程创建通用函数addItem。您可以在一个地方看到所有元素创建和DOM操作。

＆＃13;

// element references
var list = document.getElementById('list');
var appleBtn = document.getElementById('apple');
var bananaBtn = document.getElementById('banana');

// DOM manipulating function
function addItem(listElem, text) {
  var li = document.createElement('li');
  var textNode = document.createTextNode(text);
  listElem.appendChild(li).appendChild(textNode);
}

// event listeners
appleBtn.addEventListener('click', function(event) {
  addItem(list, 'apple');
});
bananaBtn.addEventListener('click', function(event) {
  addItem(list, 'banana');
});

＆＃13;

<ul id="list"></ul>

<button id="apple">Apple</button>
<button id="banana">Banana</button>

＆＃13;

但即使重复addItem(list, *)也会重复。另外，我们不一定需要一个事件监听器每按钮。如果我们可以使用单个事件监听器来处理所有情况，那会不会很好？

以下解决方案使用data-*属性存储每个按钮对列表的贡献。然后，使用event delegation我们使用单个事件侦听器（函数）处理所有按钮。

＆＃13;

// element references
var list = document.getElementById('list');
var buttons = document.getElementById('buttons');

// single #buttons event delegate
buttons.addEventListener('click', function(event) {
  // event.target contains the element that was clicked
  var item = event.target.dataset.item;
  if (item === undefined) return false;
  var li = document.createElement('li');
  var textNode = document.createTextNode(item);
  list.appendChild(li).appendChild(textNode);
});

＆＃13;

<ul id="list"></ul>

<div id="buttons">
  <button data-item="apple">Apple</button>
  <button data-item="banana">Banana</button>
  <button data-item="orange">Orange</button>
  <button data-item="grape">Grape</button>
  <button data-item="plum">Plum</button>
</div>

＆＃13;

Answer 2

确保在每次点击时创建或克隆var newElement和newElText，而不是引用：https://jsfiddle.net/ejha3q94/2/

否则它不会创建新的列表元素，但每次都会修改现有的列表元素。

document.getElementById("itemOne").addEventListener("click", function() {
    var newElement = document.createElement("li");
    var newElText = document.createTextNode("Banana");
    document.getElementById("list").appendChild(newElement).appendChild(newElText);
});

document.getElementById("itemTwo").addEventListener("click", function() {
    var newElement = document.createElement("li");
    var newElText = document.createTextNode("Apple");
    document.getElementById("list").appendChild(newElement).appendChild(newElText);
});

Answer 3

您可以将document.querySelectorAll()与选择器"[id^=item]"一起使用;使用for..of循环迭代元素;在click事件处理程序中创建元素;在将#text元素追加到li元素之前，使用HTMLElement.dataset将li元素附加到ul元素

<div id="itemOne" data-fruit="Banana">
  
</div>

<div id="itemTwo" data-fruit="Apple">
  
</div>
<ul id="list"> </ul>
<script>
var list = document.getElementById("list");
for (el of document.querySelectorAll("[id^=item]")) {
  el.addEventListener("click", function() {
    list.appendChild(document.createElement("li"))
    .textContent = this.dataset.fruit;
  })
}
</script>

jsfiddle https://www.pubnub.com/docs/codenameone-java/pam-security#understanding_access_manager_permissions_hierarchy

Answer 4

只能有一个newElText节点。如果你多次追加它，它就会被移动。您应该手动克隆它：

var newElement = document.createElement("li");
var list = document.getElementById("list");
document.getElementById("itemOne").addEventListener("click", function() {
  var newElText = document.createTextNode("Banana");
  list.appendChild(newElement.cloneNode(false)).appendChild(newElText);
});
document.getElementById("itemTwo").addEventListener("click", function() {
  var newElText = document.createTextNode("Apple");
  list.appendChild(newElement.cloneNode(false)).appendChild(newElText);
});

<div id="itemOne"></div>
<div id="itemTwo"></div>
<ul id ="list"></ul>

Javascript DOM操作，每次单击都会创建一个新的li元素

4 个答案: