blocks|key|965488|text|+var+test+=+"<div+class='saved'+>"%2B
+"<div+>test.test</div>+<div+class='remove'>[Remove]</div></div>";|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|965489|如果需要换行符，可以添加"\n“。|unstyled|965490|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> var test = "&lt;div class='saved' &gt;"+
 "&lt;div &gt;test.test&lt;/div&gt; &lt;div class='remove'&gt;[Remove]&lt;/div&gt;&lt;/div&gt;";
</code></pre>

<p>You can add "\n" if you require line-break.</p>


blocks|key|1179802|text|欢迎光临！我知道这是一篇比较老的文章，但我是在Google上搜索"javascript+add+large+block+of+html+as+variable“时找到的。我想我应该发布一个替代的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1179803|首先，我建议在变量本身两边使用单引号...使得在实际HTML代码中保留双引号变得更容易。|1179804|如果您想保持代码的格式化感觉，可以使用反斜杠来分隔各行：|1179805|var+code+=+'<div+class="my-class">+\
++++++++<h1>The+Header</h1>+\
++++++++<p>The+paragraph+of+text</p>+\
++++++++<div+class="my-quote">+\
++++++++++++<p>The+quote+I\'d+like+to+put+in+a+div</p>+\
++++++++</div>+\
++++</div>';|code-block|syntax|javascript|1179806|注意:您显然需要转义代码中的任何单引号(例如，在最后一个'p‘标记中)|1179807|无论如何，我希望这能帮助其他可能正在寻找与我相同的答案的人…干杯!|1179808|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Greetings!  I know this is an older post, but I found it through Google when searching for "javascript add large block of html as variable".  I thought I'd post an alternate solution.</p>

<p>First, I'd recommend using single-quotes around the variable itself ... makes it easier to preserve double-quotes in the actual HTML code.</p>

<p>You can use a backslash to separate lines if you want to maintain a sense of formatting to the code:</p>

<pre><code>var code = '&lt;div class="my-class"&gt; \
        &lt;h1&gt;The Header&lt;/h1&gt; \
        &lt;p&gt;The paragraph of text&lt;/p&gt; \
        &lt;div class="my-quote"&gt; \
            &lt;p&gt;The quote I\'d like to put in a div&lt;/p&gt; \
        &lt;/div&gt; \
    &lt;/div&gt;';
</code></pre>

<p>Note: You'll obviously need to escape any single-quotes inside the code (e.g. inside the last 'p' tag)</p>

<p>Anyway, I hope that helps someone else that may be looking for the same answer I was ... Cheers!</p>


blocks|key|965652|text|我们可以使用反引号()而不会出现任何错误。例如：<div>"test"<div>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|965653|我们可以将大模板(HTML)存储在ES6+javascript标准中引入的反引号内|965654|不需要转义任何特殊字符|965655|如果没有反划线..我们需要通过附加反斜杠()来转义字符，例如：“\"test\"”|965656|entityMap^0|O|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|S|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|M|$]]

<p>we can use backticks (``) without any error.. eg: <code>&lt;div&gt;"test"&lt;div&gt;</code></p>

<p>we can store large template(HTML) inside the backticks which was introduced in ES6 javascript standard</p>

<p>No need to escape any special characters</p>

<p>if no backticks.. we need to escape characters by appending backslash() 
eg:" \"test\""</p>


blocks|key|1179865|text|仅供参考，这里是不同技术渲染性能的基准测试，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1179866|http://jsperf.com/zp-string-concatenation/6|offset|length|1179867|m，|1179868|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|17|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>Just for reference, here is a benchmark of different technique rendering performances,</p>

<p><a href="http://jsperf.com/zp-string-concatenation/6" rel="nofollow">http://jsperf.com/zp-string-concatenation/6</a></p>

<p>m,</p>


blocks|key|965744|text|使用反引号的使用template语法的现代Javascript实现也是将HTML代码块分配给变量的一种简单方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|965745|++++const+firstName+=+'Sam';
++++const+fullName+=+'Sam+Smith';
++++const+htmlString+=+`<h1>Hello+${fullName}!</h1><p>This+is+some+content+\
++++++++that+will+display.+You+can+even+inject+your+first+name,+${firstName},+\
++++++++in+the+code.</p><p><a+href="http://www.google.com">Search</a>+for+\
++++++++stuff+on+the+Google+website.</p>`;|code-block|syntax|javascript|965746|entityMap^0|8|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Modern Javascript implementations with the <code>template</code> syntax using backticks are also an easy way to assign an HTML block of code to a variable:</p>

<pre><code>    const firstName = 'Sam';
    const fullName = 'Sam Smith';
    const htmlString = `&lt;h1&gt;Hello ${fullName}!&lt;/h1&gt;&lt;p&gt;This is some content \
        that will display. You can even inject your first name, ${firstName}, \
        in the code.&lt;/p&gt;&lt;p&gt;&lt;a href="http://www.google.com"&gt;Search&lt;/a&gt; for \
        stuff on the Google website.&lt;/p&gt;`;
</code></pre>


blocks|key|965716|text|您可以创建一个javascript对象，key是html代码片段的名称，value是html字符串数组，它们连接在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|965717|var+html+=+{
++top_crimes_template:
++++[
++++++'<div+class="top_crimes"><h3>Top+Crimes</h3></div>',
++++++'<table+class="crimes-table+table+table-responsive+table-bordered">',
++++++++'<tr>',
++++++++++'<th>',
++++++++++++'<span+class="list-heading">Crime:</span>',
++++++++++'</th>',
++++++++++'<th>',
++++++++++++'<span+id="last_crime_span">#+Arrests</span>',
++++++++++'</th>',
++++++++'</tr>',
++++++'</table>'
++++].join(""),
++top_teams_template:
++++[
++++++'<div+class="top_teams"><h3>Top+Teams</h3></div>',
++++++'<table+class="teams-table+table+table-responsive+table-bordered">',
++++++++'<tr>',
++++++++++'<th>',
++++++++++++'<span+class="list-heading">Team:</span>',
++++++++++'</th>',
++++++++++'<th>',
++++++++++++'<span+id="last_team_span">#+Arrests</span>',
++++++++++'</th>',
++++++++'</tr>',
++++++'</table>'
++++].join(""),
++top_players_template:
++++[
++++++'<div+class="top_players"><h3>Top+Players</h3></div>',
++++++'<table+class="players-table+table+table-responsive+table-bordered">',
++++++++'<tr>',
++++++++++'<th>',
++++++++++++'<span+class="list-heading">Players:</span>',
++++++++++'</th>',
++++++++++'<th>',
++++++++++++'<span+id="last_player_span">#+Arrests</span>',
++++++++++'</th>',
++++++++'</tr>',
++++++'</table>'
++++].join("")
};|code-block|syntax|javascript|965718|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can make a javascript object with key being name of the html snippet, and value being an array of html strings, that are joined together. </p>

<pre><code>var html = {
  top_crimes_template:
    [
      '&lt;div class="top_crimes"&gt;&lt;h3&gt;Top Crimes&lt;/h3&gt;&lt;/div&gt;',
      '&lt;table class="crimes-table table table-responsive table-bordered"&gt;',
        '&lt;tr&gt;',
          '&lt;th&gt;',
            '&lt;span class="list-heading"&gt;Crime:&lt;/span&gt;',
          '&lt;/th&gt;',
          '&lt;th&gt;',
            '&lt;span id="last_crime_span"&gt;# Arrests&lt;/span&gt;',
          '&lt;/th&gt;',
        '&lt;/tr&gt;',
      '&lt;/table&gt;'
    ].join(""),
  top_teams_template:
    [
      '&lt;div class="top_teams"&gt;&lt;h3&gt;Top Teams&lt;/h3&gt;&lt;/div&gt;',
      '&lt;table class="teams-table table table-responsive table-bordered"&gt;',
        '&lt;tr&gt;',
          '&lt;th&gt;',
            '&lt;span class="list-heading"&gt;Team:&lt;/span&gt;',
          '&lt;/th&gt;',
          '&lt;th&gt;',
            '&lt;span id="last_team_span"&gt;# Arrests&lt;/span&gt;',
          '&lt;/th&gt;',
        '&lt;/tr&gt;',
      '&lt;/table&gt;'
    ].join(""),
  top_players_template:
    [
      '&lt;div class="top_players"&gt;&lt;h3&gt;Top Players&lt;/h3&gt;&lt;/div&gt;',
      '&lt;table class="players-table table table-responsive table-bordered"&gt;',
        '&lt;tr&gt;',
          '&lt;th&gt;',
            '&lt;span class="list-heading"&gt;Players:&lt;/span&gt;',
          '&lt;/th&gt;',
          '&lt;th&gt;',
            '&lt;span id="last_player_span"&gt;# Arrests&lt;/span&gt;',
          '&lt;/th&gt;',
        '&lt;/tr&gt;',
      '&lt;/table&gt;'
    ].join("")
};
</code></pre>


blocks|key|965825|text|请在html字符串的前面和结尾使用符号反引号'`‘，这就是所谓的模板文字，现在您可以在多行中编写纯html并将其赋值给变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|965826|示例>>|965827|var+htmlString+=

`

<span>Your</span>
<p>HTML</p>

`|code-block|syntax|javascript|965828|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Please use symbol backtick '`' in your front and end of html string, this is so called template literals, now you able to write pure html in multiple lines and assign to variable.</p>
<p>Example &gt;&gt;</p>
<pre><code>var htmlString =

`

&lt;span&gt;Your&lt;/span&gt;
&lt;p&gt;HTML&lt;/p&gt;

`
</code></pre>


<p>what is the syntax to store a block of html code to a javascript variable?</p>

<pre><code>&lt;div class='saved' &gt;
&lt;div &gt;test.test&lt;/div&gt; &lt;div class='remove'&gt;[Remove]&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>I want to assign the above code to a variable 'test' </p>

<pre><code>var test = "&lt;div class='saved' &gt;
&lt;div &gt;test.test&lt;/div&gt; &lt;div class='remove'&gt;[Remove]&lt;/div&gt;&lt;/div&gt;";
</code></pre>

<p>but it does not work, which are the correct syntax for assigning the code?</p>

<p>TIA</p>


how to assign a block of html code to a javascript variable

将html代码块存储到javascript变量的语法是什么？<div class='saved' ><div >test.test</div> <div class='remove'>[Remove]</div></div>我想把上面的代码赋给一个变量'test‘var test = "<div class='saved' ><div >test.test</div> <div class='re

问如何将一段html代码赋给javascript变量
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将一段html代码赋给javascript变量EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将一段html代码赋给javascript变量
EN