Как назначить блок html-кода переменной javascript

что такое синтаксис для хранения блока 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='remove'>[Remove]</div></div>";

но это не работает, что является правильным синтаксисом для назначения кода?

ТИА

Ответы

Ответ 1

 var test = "<div class='saved' >"+
 "<div >test.test</div> <div class='remove'>[Remove]</div></div>";

Вы можете добавить "\n", если вам нужен разрыв строки.

Ответ 2

Привет! Я знаю, что это более старая запись, но я нашел ее через Google при поиске "javascript добавляет большой блок html как переменную". Я думал, что отправлю альтернативное решение.

Во-первых, я бы рекомендовал использовать одиночные кавычки вокруг самой переменной... упрощает сохранение двойных кавычек в фактическом HTML-коде.

Вы можете использовать обратную косую черту для разделения строк, если хотите сохранить смысл форматирования кода:

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

Примечание. Очевидно, вам нужно избежать каких-либо одиночных кавычек внутри кода (например, внутри последнего тега "p" )

В любом случае, я надеюсь, что это поможет кому-то другому, который может искать тот же ответ, какой я был... Приветствия!

Ответ 3

мы можем использовать backticks (``) без каких-либо ошибок.. например: <div>"test"<div>

мы можем хранить большой шаблон (HTML) внутри обратных ссылок, который был введен в стандарте javascript ES6

Не нужно избегать специальных символов

Если нет обратных ссылок... нам нужно избежать символов, добавив обратную косую черту() например: "\" test\""

Ответ 4

Я рекомендую использовать фреймворк mustache. https://github.com/janl/mustache.js/.

<body>
       ....................
       <!--Put your html variable in a script and set the type to "x-tmpl-mustache"-->
       <script id="template" type="x-tmpl-mustache">
           <div class='saved' >
           <div >test.test</div> <div class='remove'>[Remove]</div></div>
    </script>
</body>

  //You can use it without jquery.
  var template = $('#template').html();
  var rendered = Mustache.render(template);
  $('#target').html(rendered);

Почему я рекомендую это?

Вскоре или последним вы попытаетесь заменить часть HTML-переменной и сделать ее динамичной. Работа с этим как HTML String будет головной болью. Вот где магия Усы может помочь вам.

<script id="template" type="x-tmpl-mustache">
 <div class='remove'>  {{ name }}! </div> ....
</script>

и

 var template = $('#template').html();
 // You can pass dynamic template values
  var rendered = Mustache.render(template, {name: "Luke"});
  $('#target').html(rendered);

Есть много других функций.

Ответ 5

Просто для справки, здесь приведено сравнение различных характеристик рендеринга техники,

http://jsperf.com/zp-string-concatenation/6

т