是否可以将带有子元素的 html 元素保存为 JS 变量，您可以动态地将 append 保存到 DOM 中？

Question

我有这个表单片段

<div id="form-container" class="row">
       <select style="width:250px;" name="drug_pack_size" id="drug_pack_size" class="form-control">
         <option value="">Selling Unit</option>
         <option value="Ampoule">Ampoule</option>
       </select>
       <span class="d-flex">
         <p class="mx-3">contains</p>
         <input type="text" class="form-control">
       </span>
       <span class="d-flex">
         <p class="mx-3">for</p>
         <input type="text" class="form-control">
         <p class="mx-3">GHC</p>
       </span>
     </div> 

有没有可能做这样的事情

const form = document.querySelector('#form-element').content

这样您就可以使用 JS 代码反复动态地 append 它，而无需从 JS 后端编写所有内容

Answer 1

对的，这是可能的。 请试试

 var x = document.getElementById("form-container").outerHTML;
 window.alert(x);

在此捕获之后，如果您想重复添加相同的父元素，则包含变量以增加父元素和子元素的id和/或name以防止重复。 例如， id="form-container1" 、 id="form-container2" 、 id="form-container3"等。