将HTML转换为Javascript字符串

Question

我正在读一本关于如何创建SPA (单页应用程序)的书。作者写道，如果集成开发环境很好，那么将有一种技术来转换高亮显示的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/