使用Javascript提取输入并插入HTML

我想使用JS从搜索栏中获取值，然后将其放入HTML中

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

我的问题是，您如何使用这些数据来填写：

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

*来自上述函数的值“

通常情况下，您会使用主函数用于运行作业的两个小函数，例如

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

关联的HTML可能是：

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

---

你可以很容易地做到这一点。将一个变量设置为输入的

值

，然后使用该变量设置另一个

输入的
值或
值。你还需要一个事件监听器来监听输入的更改或点击按钮

这里有一个演示：
可能与