Question

尝试制作一个简单易用的清单。

我想知道如何将resultsStored变量的结果附加到空项目div中，以便每次在文本输入中输入项目时都会附加。

干杯！

HTML：

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

JS：

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
});

Answer 1

您可以使用 innerHTML 属性：

items.innerHTML += resultStored;

希望这有帮助。

＆＃13;

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
  items.innerHTML += resultStored;
});

＆＃13;

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

＆＃13;

在p示例中包含新条目

＆＃13;

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
  items.innerHTML += "<p>" + resultStored + "</p>";
});

＆＃13;

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

＆＃13;

Answer 2

＆＃13;

var button = document.getElementById('add-item');
var result = document.getElementById('result');

document.querySelector('button').addEventListener("click", function() {
  // Store results
  var resultStored = result.value;
  // Reset value of input
  result.value = "";

  // Get items container
  var items = document.getElementById('items');
  // Add items to container
  items.innerHTML+='</br>'+resultStored;
  result.focus();
});

＆＃13;

<input id="result" type="text" name="" placeholder="Enter item">
<button id="add-item" type="button" name="button">Add</button>
<div id="items">

</div>

＆＃13;

Answer 3

我首先要为待办事项创建一个数组。然后，您可以遍历此数组，将每个数组添加到页面。这样，您将能够非常轻松地编辑特定项目。

``` var button = document.getElementById（＆＃39; add-item＆＃39;）; var result = document.getElementById（＆＃39; result＆＃39;）; var items = []; var itemsContainer = document.getElementById（＆＃39; items＆＃39;）;

document.querySelector('button').addEventListener("click", function() {
    // add item to array
    items.push(result.value);

    // Reset value of input
    result.value = "";

    // reset items container
    itemsContainer.innerHTML = '';

    // Add items to container
    for (var i = 0; i < items.length; i++) {
        itemsContainer.innerHTML += "<br />" + items[i];
    };
});

```

将输入值附加到元素中

3 个答案: