將HTML轉換為Javascript字符串

Question

我正在讀一本有關如何創建SPA（單頁應用程序）的書。 作者寫道，如果IDE很好，那么將有一種技術可以將突出顯示的HTML部分轉換為JavaScript字符串。 如何在Visual Studio 2013中完成？ 下面是我希望如何轉換工作的一個示例。 同樣，切換回html也很棒。

HTML

<div class="spa-shell-head">
 <div class="spa-shell-head-logo"></div>
 <div class="spa-shell-head-acct"></div>
 <div class="spa-shell-head-search"></div>
</div>

JAVASCRIPT

var main_html = String()
+ '<div class="spa-shell-head">'
 + '<div class="spa-shell-head-logo"></div>'
 + '<div class="spa-shell-head-acct"></div>'
 + '<div class="spa-shell-head-search"></div>'
+ '</div>';

Answer 1

與其將HTML轉換為JS字符串，不如在JS中創建元素並將其放入DOM會更好。 這將為您提供更多的控制權，而不會創建難以維護/讀取的代碼，不會產生問題，並且速度更快：

var outerDiv = document.createElement("div");
outerDiv.className = "spa-shell-head";

var innerDivLogo = document.createElement("div");
innerDivLogo.className = "spa-shell-head-logo";

var innerDivAcct = document.createElement("div");
innerDivAcct.className = "spa-shell-head-acct";

var innerDivSearch = document.createElement("div");
innerDivSearch.className = "spa-shell-head-search";

outerDiv.appendChild(innerDivLogo);
outerDiv.appendChild(innerDivAcct);
outerDiv.appendChild(innerDivSearch);
document.body.appendChild(outerDiv);

上面創建了以下內容：

https://jsfiddle.net/yfeLbhe4/