Question

不，我现在不想要PHP。继承我的任务...我喜欢从FORM获取数据然后使用该数据使用eventHandler创建一个新元素..我也想保留我使用事件处理程序的部分。问题是附加的数据在d页面中不会停留很长时间。请停止

document.getElementById("fom").addEventListener("submit", performTask);

function performTask() {
  var input = document.getElementById('input');
  input = input.value;
  // console.log(input);
  // alert(input);

  var newList = document.createElement('li');
  newList.appendChild(input);
  var element = document.getElementById('orList');
  var child = document.getElementById('last');
  element.insertAfter(newList, child);

  //e.preventDefault();	
}

<form id="fom"> <br>
  <input type="text" placeholder="Enter list name" id="input" autofocus required>
  <br><br>
  <input type="submit" value="Append">
</form>

<ol id="orList">
  <li>List</li>
  <li>Another list</li>
  <li id="last">Some list</li>
</ol>

Answer 1

首先，你做错了什么：

函数performTask需要接收event参数
evt.preventDefault()如果可取消，则取消该事件，不停止进一步传播事件。（在你的情况下提交活动）
insertAfter是一个Jquery函数而不是javascript
我使用insertAdjacentHTML javascript简化代码功能。有关此链接的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
newList.appendChild(input);此行错误，因为您无法附加字符串。

这是您对问题的回答：

＆＃13;

document.getElementById("fom").addEventListener("submit", performTask);

function performTask(evt) {
  evt.preventDefault();	
  var input = document.getElementById('input');
  input = input.value;

  var d1 = document.getElementById('last');
  d1.insertAdjacentHTML('beforeend', '<li>'+input+'</li>');
	document.getElementById('input').value = '';
}

＆＃13;

<form id="fom" method="post"> <br>
  <input type="text" placeholder="Enter list name" id="input" autofocus required>
  <br><br>
  <input type="submit" value="Append">
</form>

<ol id="orList">
  <li>List</li>
  <li>Another list</li>
  <li id="last">Some list</li>
</ol>

＆＃13;

使用JavaScript从表单中附加数据

1 个答案: