Javascript 附加<；选择>；元素

我正在尝试创建一个按钮，该按钮调用一个函数，该函数使用选择框创建新的列表项。下面的代码创建了一个select元素，但是，按钮消失了，它不会一个接一个地创建列表项。你知道我如何持久化按钮并添加一个又一个select元素吗

<button type="button" onclick="createTable()">Add Item</button>

function createTable() 
{
     var itemName = "Selections: "; 
     document.write(itemName);

     for (var i=0;i<7;i++) 
      {
      var myTable = " ";
      myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>";
      myTable+="<option value='zeroPoint'>0</option>";
      myTable+="<option value='halfPoint'>1/2</option>"; 
      myTable+="<option value='onePoint'>1</option>";
      myTable+="</select>";
      document.write(myTable);
      }
}

添加项目
函数createTable（）
{
var itemName=“选择：”；
文件。填写（项目名称）；
对于（var i=0；i如果您使用document.write（“”），则整个网页内容将替换为您在document.write函数中传递的内容。改为在button元素下创建一个div元素，如

<div id="list"></div>



然后在javascript文件中更改为

function createTable() 
{
 var itemName = "Selections: "; 
 var selectElement = document.getElementById(list);

 for (var i=0;i<7;i++) 
  {
  var myTable = " ";
  myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>";
  myTable+="<option value='zeroPoint'>0</option>";
  myTable+="<option value='halfPoint'>1/2</option>"; 
  myTable+="<option value='onePoint'>1</option>";
  myTable+="</select>";
  selectElement.innerHTML = myTable;
  }
}

函数createTable（）
{
var itemName=“选择：”；
var selectElement=document.getElementById（列表）；
对于（var i=0；i我对您的documnet.write方式做了一些更改。但是，我强烈建议动态创建html dom节点。我添加了另一个方法createTable2，它可以执行所需的操作。您还可以更容易地保留您拥有的html内容，可以使用document.write方式轻松地重写这些内容

编辑：

我又添加了一个方法createTable2，以允许添加多个选择。有一个模型，您可以传递您拥有的选择和选项信息。有一个标志empty，如果您想在添加新选择之前清空div，则该标志设置为true；即createTable3（true）


函数createTable（）
{
var itemName=“选择：”；
var selectElement=document.getElementById（“呈现”）；
对于（var i=0；i我不确定您到底想要实现什么，但是在字符串中包含DOM元素，然后在HTML中修改元素或使用document.write只是一种技巧。您需要利用DOM API

这意味着我的代码可能是你代码的两倍或三倍大。从长远来看，这是一个更易于维护的版本


函数createTable（）{
var selectMenu=document.querySelector（“#selectionsContainer”）；
//选项元素数组
var myTable=[]；
//将某些元素推送到my table数组
// 
myTable.push（
createOption（'zeroPoint'，0），
createOption（“半点”，0.5），
createOption（'onePoint'，1）
)
//循环遍历所有元素并将它们添加到//选择容器
//
myTable.forEach（元素=>{
selectionsContainer.appendChild（元素）；
});
}
/**创建一个option元素并将其返回以供使用*/
函数createOption（值、标签）{
var option=document.createElement（'option'）；
option.value=值；
option.innerText=标签；
返回选项；
}
函数计算（值）{
log（'do any you want with the value:'，value）；
}
选择{
字体大小：10px
}
添加项目
选择
5.
到目前为止，所有的答案都指出OP可能因为没有动态创建select而出错。但我们不知道他的要求

此外，每个人都已经解释了document.write将在您的整个文档上写入，从而删除所有内容，您不希望这样

文档。编写-->

应使用appendChild，但您需要字符串，appendChild期望节点不是字符串

追加子项-->

节点-->

所以解决这一问题的唯一方法是使用innerHTML，并通过添加新的来总结内部Html

或者通过从sting创建节点（这需要更多的逻辑），请参见此处-->

innerHTML-->

const selectTamplate=（selectId，onChangeCallbackName）=>{
返回`
0
1/2
1.
`
};
常量appendStringHtml=（elementTargetHtml，elemenAppend）=>{
elemenAppend.innerHTML+=elementTargetHtml；
}
const doSomethingOnChange=（）=>{
console.log（“我是国王！”）；
};
const placeToAppend=document.querySelector（“.append在此处选择”）；
const buttonAppender=document.querySelector（'.btn append'）；
让selectID=1；
buttonAppender.addEventListener（'单击'，（）=>{
const selectHTML=selectTamplate（selectID，'doSomethingOnChange'）；
appendStringHtml（选择HTML、placeToAppend）；
selectID++；
});
添加选择项

请参见此处的工作代码-->

我使用了模板字符串，这样就可以进行插值，更清晰一点。在保留您的逻辑的同时分离逻辑。
首先要做的是消除对
文档使用的依赖。写入
文档。写入
和持久性是矛盾的。相反，使用诸如：，等等。我建议命令您使用element.append（element）而不是document.write（）。创建一个根元素，您希望将所有选择列表附加到该根元素，并将每个选择列表附加到该根元素。我希望这会有所帮助。字符串连接来构造DOM是不好的，我们有DOM API是有充分理由的。如果您用PHP回显HTML，这本来是可以的，但如果您使用javascript，这看起来是一个黑客行为。我的answer只是帮助OP解决他的问题。OP使用了字符串连接来构造HTML，我对其进行了扩展。我不认为这会导致否决。请看下面的事实，您想帮助OP解决他的问题是很好的！但他处理问题的方式是不好的，原因如下所述和您的
。innerHTML
也有类似的问题，被认为是一种不好的做法（不管它可能做OP想要的事情）我个人很感激任何人在帮助他人方面所做的努力，但我看不出有人会建议一个不好的做法作为问题的解决方案而不采取任何行动。嗨@orabis，谢谢！但是我如何修改它，以便在我单击按钮后显示几个带有选项的选择元素？我添加了一个“for”循环
const selectTamplate = (selectId, onChangeCallbackName) => {
  return `
    <select name='test' id='mySelect${selectId}' style='font-size:10px' onchange='${onChangeCallbackName}()'>
     <option value='zeroPoint'>0</option>
     <option value='halfPoint'>1/2</option>
     <option value='onePoint'>1</option>
    </select> 
  `
};

const appendStringHtml = (elementTargetHtml, elemenAppend) => {
  elemenAppend.innerHTML += elementTargetHtml;
}

const doSomethingOnChange = () => {
  console.log('I am the KING!');
};

const placeToAppend = document.querySelector('.append-selects-here');
const buttonAppender = document.querySelector('.btn-append');
let selectID = 1;

buttonAppender.addEventListener('click', ()=>{
  const selectHTML = selectTamplate(selectID, 'doSomethingOnChange');
  appendStringHtml(selectHTML, placeToAppend);
  selectID ++;
});

<button class="btn-append">Add Selects</button>
<div class="append-selects-here"></div>