javascript/jquery生成输入元素

Question

所以我有这个代码.我想为javascript家伙完成一些可能很简单的事情.如果选择了某个选项,则在div上添加一个输入字段.

<select name="amount" >
    <option value="50">50$</option>
    <option value="100">100$</option>
    <option value="Other">Other</option>
</select>

<div id="custom_price">

</div>

所以我想在选择"其他"选项后添加输入字段.我知道有一个简单的方法,但我无法使它工作:

document.getElementById('custom_price').innerHTML += "<input type="text" name="amount"/>"

所以custom_div看起来像:

<div id="custom_price">
Custom price:<br>
<input type="text" name="amount"/>
</div>

Answer 1

最好的方法是实际制作dom元素.

var newInput = document.createElement("input");
newInput.type="text";
newInput.name="amount";
document.getElementById('custom_price').appendChild(newInput);

也许有这样的处理程序:

指定您的选择ID: <select name="amount" id="amount">

$("#amount").change( function() {
 if( $(this).val() == "Other" ){
  document.getElementById('custom_price').innerHTML = "";
  var newInput = document.createElement("input");
  newInput.type="text";
  newInput.name="amount";
  document.getElementById('custom_price').appendChild(newInput);
 }
});