Konvertieren Sie HTML in HTML-Zeichenfolge in JS-Datei

Ich möchte etwas HTML über JS erstellen, daher muss ich das HTML wie folgt in die JS-Datei schreiben:

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

Gibt es ein Tool oder eine Verknüpfung, um diese Art von HTML-Zeichenfolge zu erstellen?

Ich meine, in diesem Fall musste ich all dieses HTML von Hand eingeben. mit +und musste "Zeichen hinzufügen .

Etwas, das dies umwandeln kann:

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

zu der ersten Zeichenfolge, die ich von Hand eingeben musste

Sie können ein Vorlagenliteral verwenden (beachten Sie die Back-Ticks). Das Literal unterstützt mehrzeilig, und Sie müssen sich den Anführungszeichen nicht entziehen (Sie müssen sich den Back-Ticks entziehen).

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

Beispiel:

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>

Sie können der Funktion auch Parameter übergeben und diese mithilfe der Ausdrucksinterpolation in die Zeichenfolge einfügen :

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>

Aktualisieren Sie Ihre JS-Datei auf:

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

Lesen Sie diesen Link für weitere Informationen: Vorlagenliterale

Sie können auch '(ein Zitat) verwenden, damit Sie nicht jedes "/ front" setzen müssen.

Verwenden Sie einfach Vorlagenliterale (kein einfaches Anführungszeichen "'", sondern das Back-Tick "` ") wie folgt:

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

Vorlagenliterale sind Zeichenfolgenliterale, die eingebettete Ausdrücke zulassen. Sie können damit mehrzeilige Zeichenfolgen und Zeichenfolgeninterpolationsfunktionen verwenden. Sie wurden in früheren Ausgaben der ES2015-Spezifikation als "Template-Strings" bezeichnet.

Über - MDN Web Docs

Eine alternative Methode besteht darin, einfache Anführungszeichen zu verwenden und das Zeilenumbruchzeichen zu maskieren.

Etwas wie das:

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

Wenn Sie zu einfachen Anführungszeichen wechseln, können Sie die doppelten Anführungszeichen im HTML-Code nicht umgehen, müssen jedoch die einfachen Anführungszeichen in Anführungszeichen setzen.

Eine andere Alternative ist die Verwendung eines Arrays und .join('')es:

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

Auf diese Weise können Sie später problemlos Teile des Codes hinzufügen, bearbeiten oder löschen.

Beide Optionen gelten für ES5 oder älter.

Verwenden Sie für moderne Browser die von Ori Drori bereitgestellte ES6-Version .