在页面上显示用户输入

Question

我被这个问题困扰了一段时间，但我无法完全弄清楚。我想将用户输入显示为 h1 元素。我该怎么做呢？let allAssignments;if (localStorage.getItem("everyAssignment")) {  allAssignments = JSON.parse(localStorage.getItem("everyAssignment"))} else {  allAssignments = []}function submitFunc() {  let names = document.getElementById("name").value;  allAssignments.push(names)  localStorage.setItem("everyAssignment", JSON.stringify(allAssignments));  let finalArray = JSON.parse(localStorage.getItem("everyAssignment"));}<button onclick="submitFunc()">Submit</button><input placeholder="Enter Name Here" id="name">我想为本地存储中的每个项目创建一个 div 元素，并使用 .innerHTML 插入一个 h1 元素，其中包含数组中每个值的名称。我该怎么做呢？

Answer 1

你可以这样做：

const submitFunc = () => {

  const value = document.getElementById('name').value;

  const parent = document.createElement('div');

  const pTag = document.createElement('p');

  pTag.innerText = value;

  parent.appendChild(pTag);

  document.body.appendChild(parent);

}

<button onclick="submitFunc()">Submit</button>

<input placeholder="Enter Name Here" id="name">

Answer 2

如果你想将其显示为 H1 元素，你可以执行以下操作

    const submitFunc = () => {

      const value = document.getElementById('name').value;

      const parent = document.createElement('div');

      const hTag = document.createElement('h1');

      var node = document.createTextNode(value);

      hTag.appendChild(node);

      parent.appendChild(pTag);

      document.body.appendChild(parent);

    }

这是要使用的标记。

<button onclick="submitFunc()">Submit</button>

<input placeholder="Enter Name Here" id="name">