przekonwertować HTML na ciąg HTML w pliku JS

Chcę utworzyć HTML za pomocą JS, dlatego muszę zapisać HTML w pliku JS, np .:

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

czy istnieje narzędzie lub skrót do utworzenia tego typu łańcucha HTML?

To znaczy, w tym przypadku musiałem ręcznie wpisać cały ten HTML. z +i trzeba dodać "znak.

Coś, co może to przekonwertować:

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

do pierwszego ciągu, który musiałem wpisać ręcznie

Możesz użyć literału szablonu (zwróć uwagę na tyknięcia). Dosłowność obsługuje multilinię i nie będziesz musiał uciekać przed cudzysłowami (musisz uciec od tyknięć).

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

Przykład:

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>

Możesz również przekazać parametry do funkcji i wstawić je do ciągu za pomocą interpolacji wyrażeń :

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>

zaktualizuj plik JS, aby:

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

Przeczytaj ten link, aby uzyskać więcej informacji: literały szablonów

Możesz także użyć „(jeden cytat), więc nie musisz umieszczać / umieszczać każdego”

Wystarczy użyć literałów szablonów (nie pojedynczego cudzysłowu „”, ale zaznaczenie „”) w następujący sposób:

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

Literały szablonów to literały łańcuchowe, które umożliwiają osadzanie wyrażeń. Możesz używać z nimi ciągów wieloliniowych i funkcji interpolacji ciągów. Były one nazywane „ciągami szablonów” we wcześniejszych wydaniach specyfikacji ES2015.

Poprzez - MDN Web Docs

Alternatywną metodą jest użycie pojedynczych cudzysłowów i uniknięcie znaku nowej linii.

Coś takiego:

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

Zamiana na pojedyncze cytaty pozwala uniknąć podwójnych cudzysłowów w kodzie HTML, ale nadal musisz cytować pojedyncze cytaty.

Inną alternatywą jest użycie tablicy, .join('')która:

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

Pozwala to później łatwo dodawać / edytować / usuwać części kodu.

Obie te opcje dotyczą ES5 lub starszych.

Dla nowoczesnej przeglądarki, proszę skorzystać z wersji ES6 dostarczone przez Ori Drori .