用JavaScript創建

Question

重複複雜的HTML結構創建使用`.createElement（）有一噸的HTML代碼，甚至單行：

 //<h1><a href="/{{slug}}">{{name}}</a></h1> 
     var elementHeading = document.createElement("h1"); 
     elementHeader.appendChild(elementHeading); 
     var elementHeadingLink = document.createElement("a"); 
      var elementHeadingLinkHref = document.createAttribute("href"); 
      elementHeadingLinkHref.value = '/slug/'; 
      elementHeadingLink.setAttributeNode(elementHeadingLinkHref); 
      var elementHeadingLinkText = document.createTextNode('name'); 
     elementHeadingLink.appendChild(elementHeadingLinkText); 
     elementHeading.appendChild(elementHeadingLink); 

有沒有一種簡單的方法來做到這一點？

Answer 1

解決方案是在開始時將HTML輸出到頁面上，然後使用.cloneNode（）創建元素的副本，然後您可以修改並添加到文檔中。

var elementTemplate = document.getElementById("elementTemplateHolder").firstChild; 
var newElement = elementTemplate .cloneNode(true); 
document.getElementById('container').appendChild(newElement);