Я хочу создать HTML через JS, поэтому мне нужно написать HTML внутри файла JS, например:
function createHtmlSection() {
return "<li class=\"chapter up-wrapper-btn\">" +
"<div>" +
"<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" +
"<label contenteditable=\"true\">section 1</label>" +
"</div>" +
"</li>";
}
Есть ли инструмент или какой-либо ярлык для создания этого типа строки HTML?
Я имею в виду, в этом случае мне нужно было набрать весь этот html вручную. с +
и необходимо добавить "
знак.
Что-то, что может преобразовать это:
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>
до первой строки, которую мне нужно было ввести вручную
javascript
html
Devy
источник
источник
Ответы:
Вы можете использовать шаблонный литерал (обратите внимание на галочки). Литерал поддерживает многострочный текст, и вам не нужно выходить из кавычек (вам нужно избегать обратных тиков).
Пример:
Вы также можете передать параметры в функцию и вставить их в строку, используя интерполяцию выражений :
Показать фрагмент кода
источник
обновите файл JS до:
Прочитайте эту ссылку для получения дополнительной информации: литералы шаблона
источник
Вы также можете использовать '(одна цитата), так что вам не нужно ставить / перед каждый "
источник
Просто используйте литералы шаблона (не одну кавычку "'", а обратную галочку "` ") следующим образом:
источник
Альтернативный метод - использовать одинарные кавычки и экранировать символ новой строки.
Что-то вроде этого:
Переключение на одинарные кавычки избавляет вас от экранирования двойных кавычек в HTML, но вам все равно нужно заключать в кавычки одинарные кавычки.
Другая альтернатива - использовать массив и
.join('')
это:Это позволяет вам легко добавлять / редактировать / удалять части кода позже.
Оба эти варианта предназначены для ES5 или старше.
Для современного браузера, пожалуйста, используйте версию ES6, предоставленную Ori Drori .
источник