konversi html ke string html dalam file JS

Saya ingin membuat beberapa html melalui JS, oleh karena itu saya perlu menulis html di dalam file JS seperti:

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

apakah ada alat atau jalan pintas untuk membuat jenis string html ini?

Maksud saya, dalam hal ini saya harus mengetik semua html ini dengan tangan. dengan +dan perlu menambahkan "tanda.

Sesuatu yang dapat mengonversikan ini:

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

ke string pertama yang saya butuhkan untuk mengetik dengan tangan

Anda dapat menggunakan templat literal (perhatikan kutu belakang). Literal ini mendukung multiline, dan Anda tidak perlu melarikan diri dari tanda kutip (Anda harus keluar dari kutu belakang).

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

Contoh:

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>

Anda juga bisa meneruskan parameter ke fungsi, dan menyisipkannya ke string menggunakan interpolasi ekspresi :

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>

perbarui file JS Anda ke:

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

Baca tautan ini untuk informasi lebih lanjut: templat literals

Anda juga dapat menggunakan '(satu kutipan) sehingga Anda tidak harus meletakkan / depan setiap "

Cukup gunakan templat literal (bukan tanda kutip tunggal "'" tetapi centang-belakang "` ") seperti ini:

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

Literal templat adalah literal string yang memungkinkan ekspresi tersemat. Anda dapat menggunakan fitur multi-line string dan interpolasi string. Mereka disebut "templat string" dalam edisi sebelumnya dari spesifikasi ES2015.

Via - MDN Web Documents

Metode alternatif adalah dengan menggunakan tanda kutip tunggal dan keluar dari karakter baris baru.

Sesuatu seperti ini:

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());

Bertukar dengan tanda kutip tunggal menyelamatkan Anda dari lolosnya tanda kutip ganda dalam HTML, tetapi Anda masih perlu mengutip tanda kutip tunggal.

Alternatif lain adalah menggunakan array dan .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());

Ini memungkinkan Anda untuk dengan mudah menambah / mengedit / menghapus bagian-bagian kode nanti.

Kedua opsi ini untuk ES5 atau lebih lama.

Untuk peramban modern, silakan gunakan versi ES6 yang disediakan oleh Ori Drori .