конвертувати 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 Дрора .