将HTML转换为Javascript字符串 [英] Convert HTML to Javascript String

问题描述

我正在阅读一本关于如何创建SPA（单页应用程序）的书。作者写道，如果IDE是好的，那么将会有一种技术将HTML的高亮部分转换并转换为JavaScript字符串。这怎么可以在Visual Studio 2013中完成？下面是我希望转换工作的一个例子。

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

解决方案

与其将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/

I'm reading a book on how to create a SPA (single page applications). The author writes, if the IDE is any good then there will be a technique to convert a highlighted section of HTML and converted to a JavaScript string. How can this be done in Visual Studio 2013? An example of how I want the convert to work is below. Also it would be great to toggle back to the 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>';

解决方案

Rather than converting HTML to a JS string, it would be much better to create the elements in JS and put them in the DOM. This would give you much more control, not create such a difficult to maintain/read code, create less problems, and be much faster:

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

The above creates the following:

https://jsfiddle.net/yfeLbhe4/

这篇关于将HTML转换为Javascript字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！