如何在 INPUT 表单中附加Child答案

【问题标题】：How to appendChild in INPUT Form如何在 INPUT 表单中附加Child
【发布时间】：2023-04-10 03:09:01
【问题描述】：

请参阅下面的代码。如何在 INPUT 表单中附加子项我必须在 sql 中获取一个输入类型文本的值，然后 btn 添加函数关闭每个值。我希望所有信息表单 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">

【问题讨论】：

到底是什么问题？
@Pointy 我希望所有信息表单 appendChild 都在表单输入中。
你需要阅读How to ask
然后只是追加到表单节点而不是document.body
不，将其附加到<form>；您不能将元素附加到 <input>

标签： javascript

【解决方案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">

【讨论】：

【解决方案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>

【讨论】：