如何以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>