преобразовать HTML в HTML-строку в файле JS

Я хочу создать 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>

до первой строки, которую мне нужно было ввести вручную

Вы можете использовать шаблонный литерал (обратите внимание на галочки). Литерал поддерживает многострочный текст, и вам не нужно выходить из кавычек (вам нужно избегать обратных тиков).

`<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>`

Пример:

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>
  `;
}


document.querySelector('#root')
  .innerHTML = createHtmlSection();

<ul id="root"></ul>

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

function createHtmlSection(label) {
  return `
    <li class="chapter up-wrapper-btn">
        <div>
           <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
            <label contenteditable="true">${label}</label>
         </div>
    </li>
  `;
}


document.querySelector('#root')
  .innerHTML = createHtmlSection('!!! section !!!');

<ul id="root"></ul>

обновите файл 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>
          `
}

Прочитайте эту ссылку для получения дополнительной информации: литералы шаблона

Вы также можете использовать '(одна цитата), так что вам не нужно ставить / перед каждый "

Просто используйте литералы шаблона (не одну кавычку "'", а обратную галочку "` ") следующим образом:

// JavaScript

document.getElementById("a").innerHTML = `<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 -->

<div id="a"></div>

Шаблонные литералы являются строковыми литералами, допускающими встроенные выражения. Вы можете использовать многострочные строки и функции интерполяции строк. Они назывались «шаблонными строками» в предыдущих выпусках спецификации ES2015.

Via - MDN Web Docs

Альтернативный метод - использовать одинарные кавычки и экранировать символ новой строки.

Что-то вроде этого:

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

console.log(createHtmlSection());

Переключение на одинарные кавычки избавляет вас от экранирования двойных кавычек в HTML, но вам все равно нужно заключать в кавычки одинарные кавычки.

Другая альтернатива - использовать массив и .join('')это:

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>'
    ].join('');
}

console.log(createHtmlSection());

Это позволяет вам легко добавлять / редактировать / удалять части кода позже.

Оба эти варианта предназначены для ES5 или старше.

Для современного браузера, пожалуйста, используйте версию ES6, предоставленную Ori Drori .