將長 div 標簽轉換為字符串？

Question

有一個長的 div 標簽：

  <div>
     <style>
    ...
     </style>
    // lots of tags
  </div>

有沒有一種快速的方法可以將其轉換為字符串作為 function 的輸入：

function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

喜歡：

"<div>" + 
...

?

Answer 1

我不確定您在問什么，但如果您想知道如何在 JavaScript 文件中編寫 HTML 標記/結構，請使用模板文字``

var html = `
  <div class="bar">
    <h2>Lorem</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam repellendus, mollitia tempore aperiam ex aspernatur voluptate quo sed quos tempora nisi accusantium rem voluptatem quidem explicabo blanditiis, molestiae necessitatibus illo!</p>
  </div>`;

模板文字（模板字符串）- JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

這是一個例子：

 const element = document.querySelector("#foo"); let html = ` <div class="bar"> <h2>Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam repellendus, mollitia tempore aperiam ex aspernatur voluptate quo sed quos tempora nisi accusantium rem voluptatem quidem explicabo blanditiis, molestiae necessitatibus illo;</p> </div>`. element;innerHTML = html;

 <div id="foo"> </div>

Answer 2

不確定我是否誤解了您的意圖，但您可以使用 outerHTML 來獲取<div> ，其內容為字符串，如下所示：

 var myTemplateHtml = document.getElementById("myTemplate").outerHTML; document.body.innerHTML = document.body.innerHTML + myTemplateHtml;

 <div id="myTemplate"> <style> </style> <h1>Title</h1> <span>1</span> <div>2</div> </div>