将HTML转换为Javascript字符串

我正在读一本关于如何创建SPA（单页应用程序）的书。作者写道，如果IDE很好，那么就有一种技术可以将突出显示的HTML部分转换为JavaScript字符串。如何在Visual Studio 2013中实现这一点？下面是我希望转换工作方式的示例。另外，切换回html也很好

HTML

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>';

var main\u html=String（）
+ ''
+ ''
+ ''
+ ''
+ '';

与其将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);

以上内容产生了以下内容：

---

如果程序员很好，那么他就不会以任何形式将HTML字符串放入代码中。Paul你找到解决方案了吗@德里克，与其说“不要做”，不如说你能带些更有用的东西来吗？根据我的理解，“追加”和类似的函数被大量用于将html添加到以前没有的地方，现在html需要来自某个地方，所以如果不是来自字符串，那么在哪里？@Logan我添加了一个答案来解释这一切。

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);