javascript - Append input value into element - Stack Overflow

admin管理员组

文章数量:1024592

Trying to make a simple to do list.

I'm wanting to know how to append the results from the resultsStored variable into the empty items div so it appends each time you enter an item into the text input.

Cheers!

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

Trying to make a simple to do list.

I'm wanting to know how to append the results from the resultsStored variable into the empty items div so it appends each time you enter an item into the text input.

Cheers!

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

• javascript

Share Improve this question Follow edited Dec 14, 2016 at 17:28 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Dec 14, 2016 at 17:16 Joe ConsterdineJoe Consterdine 1,05322 gold badges2020 silver badges4141 bronze badges 2

• Just read the appendChild API :) – GillesC Commented Dec 14, 2016 at 17:19
• help.dottoro./ljvnuman.php – PM 77-1 Commented Dec 14, 2016 at 17:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You could use the innerHTML property :

items.innerHTML += resultStored;

Hope this helps.

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

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

</div>

Wrapping new entry in p example :

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

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

</div>

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

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

</div>

I would first create an array for the todo items. Then you can loop over this array adding each one to the page. That way later on you will be able to edit a particular item very easily.

``` var button = document.getElementById('add-item'); var result = document.getElementById('result'); var items = []; var itemsContainer = document.getElementById('items');

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

```

Trying to make a simple to do list.

I'm wanting to know how to append the results from the resultsStored variable into the empty items div so it appends each time you enter an item into the text input.

Cheers!

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

Trying to make a simple to do list.

I'm wanting to know how to append the results from the resultsStored variable into the empty items div so it appends each time you enter an item into the text input.

Cheers!

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

• javascript

Share Improve this question Follow edited Dec 14, 2016 at 17:28 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Dec 14, 2016 at 17:16 Joe ConsterdineJoe Consterdine 1,05322 gold badges2020 silver badges4141 bronze badges 2

• Just read the appendChild API :) – GillesC Commented Dec 14, 2016 at 17:19
• help.dottoro./ljvnuman.php – PM 77-1 Commented Dec 14, 2016 at 17:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You could use the innerHTML property :

items.innerHTML += resultStored;

Hope this helps.

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

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

</div>

Wrapping new entry in p example :

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

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

</div>

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

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

</div>

I would first create an array for the todo items. Then you can loop over this array adding each one to the page. That way later on you will be able to edit a particular item very easily.

``` var button = document.getElementById('add-item'); var result = document.getElementById('result'); var items = []; var itemsContainer = document.getElementById('items');

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

```

本文标签： javascriptAppend input value into elementStack Overflow