Pulling input using Javascript and inserting into HTML

Question

I want to take the value from a search bar using JS and then place it in HTML.

function pullValue() {
var search = document.getElementById("search-bar")
}

My question is how do you use that data to fill in this:

  <h3 class="ingredient">
     *value from the function above"
  </h3>

possible duplicate of [Inserting HTML into a div](http://stackoverflow.com/questions/584751/inserting-html-into-a-div) — Anonymous, Apr 04 '14 at 00:43

score 1 · Accepted Answer · answered Apr 04 '14 at 00:58

Typically you'd use a couple of small functions that are used by a main function to run the job, e.g.

// Set the text content of an element
// Some browsers support only textContent, some only innerText, some both
// so cater for them all
function setText(el, s) {
  if (typeof el.textContent == 'string') {
    el.textContent = s;
  } else if (typeof el.innerText == 'string') {
    el.innerText = s;
  }
}

// Given an element ID, set the text to text
function update(id, text) {
  var el = document.getElementById(id);
  if (el) {
    setText(el, text);
  }
}

and the associated HTML might be:

<input type="text" id="searchBar" onkeyup="update('ingredient', this.value);">
<div id="ingredient"></div>

score 0 · Answer 2 · answered Jan 05 '15 at 01:29

You can do this pretty easily. Set a variable to the value of the input, then set the innerHTML or the value of another input/div with the variable. You’ll also need an event listener of either the change of the input or the click of a button.

Here’s a demo: http://codepen.io/lachlanjc/pen/ZYBrqg?editors=101

Pulling input using Javascript and inserting into HTML

2 Answers2