如何以INPUT形式附加孩子

Question

请参阅下面的代码。如何以INPUT形式添加appendChild我必须在sql上获取一种输入类型文本的值，而btn add函数关闭每个值。 我希望所有信息表单appendChild都在表单输入中。

请帮助我。

示例函数而非示例代码：https://jsfiddle.net/surveyjs/Ljnyaeva/?utm_source=website&utm_medium=embed&utm_campaign=Ljnyaeva

function select() {
    var t = document.createTextNode("X");
    var btn = document.createElement("BUTTON");
	var ttt = document.getElementById("mySelect").value;
    var container = document.createElement("INPUT");
    container.setAttribute("type", "text");
    container.setAttribute("value", ttt);
    btn.appendChild(t);
    document.body.appendChild(container);
    document.body.appendChild(btn); 
}

<form>
  <select id="mySelect">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Banana">Banana</option>
  </select>
</form>
<br>
<br>
<button onclick="select()">Try it</button>
<br>
<br>
<input id="demo" class="form-control">

Answer 1

如果我对您的理解正确，那么有很多库可以解决“将多个预定义的值附加到文本输入字段”这样的问题： https://dbrekalo.github.io/fastselect/#section-Examples

这是一个常见的场景，很多人花时间构建可以使用的版本，因此，除非您确实想这样做，否则我不建议您尝试构建自己的版本。

在您的示例中，您尝试创建一个新输入，而不是使用DOM中已经存在的输入。

function select() {
   var ttt = document.getElementById("mySelect").value;
   var existingInput = document.getElementById("demo");
   if(existingInput.value!=""){
    existingInput.value+=", ";
   }
   existingInput.value+=ttt
}

<form>
<select id="mySelect">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Pineapple">Pineapple</option>
<option value="Banana">Banana</option>
</select>
</form>
<br>
<br>
<button onclick="select()">Try it</button>
<br>
<br>
<input id="demo" class="form-control">

Answer 2

我认为这就是您要寻找的。使其更简单。您不需要从下拉框中添加所选项目，因为它只会创建另一个文本框。

let $clearText = document.getElementById("clear-text");
let $container = document.getElementById("demo");
let $select = document.getElementById("mySelect");

function select() {
	  var curentValue = $select.value;
   
    $container.setAttribute("type", "text");
    $container.setAttribute("value", curentValue);
   
   $clearText.setAttribute("style", "display:inline-block");
}

function clearText() {
  $container.setAttribute("value", "");
  $clearText.setAttribute("style", "display:none;");
}

<form>
  <select id="mySelect">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Banana">Banana</option>
  </select>
</form>
<br>
<br>
<button type="button" onclick="select()">Try it</button>
<br>
<br>
<input id="demo" class="form-control">
<button type="button" onclick="clearText()" id="clear-text" style="display:none">X</button>