javascript - 将字符串添加到 innerHTML 问题 |选择2

Question

嘿，我的 div 中有一个看起来像这样的 div

<div style="border-radius:2px;
           background-color:#252525;
            display:inline-block;margin-left:1.5%;
            margin-right:1.5%;margin-top:1%;margin-bottom:1%;
            width:94%;max-width:94%;min-width:94%;
            height:100px;max-height:height:100px;
            min-height:height:100px;
            ">
            <span style="display:block;font-size:1.3em;
            margin-bottom: 2px;
            ">Stats conditions</span>
            
            <div style="margin-top:1%;">
            
            
            <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Gamemode</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="all">All</option>
            <option value="solo">Solo</option>
            <option value="duos">Duos</option>
            <option value="squads">Squads</option>
            </select>
            </div>
            
            <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Stat type</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="kills">kills</option>
            <option value="wins">wins</option>
            <option value="kd">kd</option>
            <option value="scrim-kills">scrim kills</option>
            <option value="scrim-wins">scrim wins</option>
            <option value="scrim-kd">scrim kd</option>
            </select>
            </div>
            
             <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Condition type</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="kills">Minimum</option>
            <option value="wins">Maximum</option>
            </select>
            </div>
            
            <div style="
align-tems:center;margin-left:1.5%;margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
<span style="display:block;font-size:0.8em">Enter number</span> 
<input id="everyMinutes" style="font-family:Montserrat;
display:block;width: 100%;min-width: 100%;max-width:100%;
border-radius: 3px;border: none;height: 2.35em;
"
type="number" value="">
            
            </div>
            
            
            
                           
                           
            
            </div>
            
            </div>

现在要添加其中的另一个，我并没有完全添加它，而是在它被 select2 渲染后添加的，所以打开它并按 f12 并复制 HTML。现在要添加这些 div 中的另一个，我将其添加到容器 HTML 中。现在，在添加一个之前，我单击了所有选择元素，它弹出来显示我的选项。现在，在我通过 innerHTML 方法添加一个之后，所有选择都不再起作用了

编辑:https://jsfiddle.net/qt0zvho3/443/ 编辑:将一个 div 添加到容器中: 单击左侧 div ==> 查看 ==> 添加统计要求

Answer 1

好像是这样https://jsfiddle.net/5dcfmo6h/如您所愿。

首先，不要使用innerHTML，使用cloneNode方法。

其次，在克隆节点之前销毁select2。然后再次为所有 .myselect 元素初始化 select2。

第三，不要在页面上重复使用相同的 id 属性——id 应该是唯一的。

JS代码:

["modal1", "modal2"].forEach((modalE) => {
  var modal = document.getElementById(modalE);
  var trigger = document.getElementById(`${modalE}-t`);
  var closeButton = document.getElementById(`${modalE}-cb`);

  trigger.addEventListener("click", function () {
    modal.classList.toggle("show-modal");
  });
  closeButton.addEventListener("click", function () {
    modal.classList.toggle("show-modal");
  });
  window.addEventListener("click", function (event) {
    if (event.target === modal) {
      modal.classList.toggle("show-modal");
    }
  });
});

$(".myselect").select2({
    placeholder: "Choose a option",
});

function addStatR(){
  $(".myselect").select2('destroy');

  const clone = document.querySelector('.stats-conditions').cloneNode(true);
  document.getElementById('stats-conditions').appendChild(clone);

  $(".myselect").select2({
    placeholder: "Choose a option",
  });
}

const addStats = document.getElementById("addStatR")
addStats.onclick = addStatR