是否可以將帶有子元素的 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"等。