更新 keyentry 上的列表元素答案

【问题标题】：Update elements of list on keyentry更新 keyentry 上的列表元素
【发布时间】：2019-12-12 10:50:36
【问题描述】：

我一直在尝试创建一个列表，该列表将随着用户在文本框中输入值而更新。

字段分隔符可以是空格、逗号、制表符或换行符。任何分隔符的多次出现都将被截断。

到目前为止，我已经提出了以下代码，但它为每个用空格分隔的值创建了一个 li 条目。

function myFunction() {
  document.getElementById("myUL").innerHTML = "";
  var node = document.createElement("LI");
  var input = document.getElementById("serverList");
  var val = input.value.split(/[\s,]+/);
  for (i = 0; i < val.length; i++) {
    var a = val[i].toUpperCase();
    var textnode = document.createTextNode(a);
    node.appendChild(textnode);
    document.getElementById("myUL").appendChild(node);
  }
}

<input type="text" id="serverList" onkeyup="myFunction()" placeholder="Enter the server list" title="Type in a name">
<ul id="myUL"></ul>

【问题讨论】：

标签： html jscript

【解决方案1】：

你需要在每个for循环中创建一个新节点。

function myFunction() {
  document.getElementById("myUL").innerHTML = "";
  var node = document.createElement("LI");
  var input = document.getElementById("serverList");
  var val = input.value.split(/[\s,]+/);

  for (i = 0; i < val.length; i++) {
    var a = val[i].toUpperCase();
    var textnode = document.createTextNode(a);
    node.appendChild(textnode);
    document.getElementById("myUL").appendChild(node);
    node = document.createElement("LI");
  }
}

<input type="text" id="serverList" onkeyup="myFunction()" placeholder="Enter the server list" title="Type in a name">
<ul id="myUL"></ul>

【讨论】：

除了有两个createElement("LI"); - 在循环结束时创建一个不必要的 LI，与我的答案有什么不同？
更改此代码更快。我只改变了原来的一行。
好吧。我总是试图改进答案。这教会了 OP 改进如何编码。

【解决方案2】：

将您的 LI 创建移动到循环内

document.getElementById("serverList").addEventListener("input",function() {
  var input = this.value;
  var val = input.split(/[\s,]+/);
  document.getElementById("myUL").innerHTML="";
  for (var i = 0; i < val.length; i++) {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(val[i].toUpperCase());
    node.appendChild(textnode);
    document.getElementById("myUL").appendChild(node);
  }
})

<input type="text" id="serverList" placeholder="Enter the server list" title="Type in a name">
<ul id="myUL"></ul>

【讨论】：