convertir html en chaîne html dans un fichier JS

Je veux créer du html via JS, j'ai donc besoin d'écrire le html dans le fichier JS comme:

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

existe-t-il un outil ou un raccourci pour créer ce type de chaîne html?

Je veux dire, dans ce cas, je devais taper tout ce html à la main. avec +et nécessaire d'ajouter un "signe.

Quelque chose qui peut convertir ceci:

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

à la première chaîne que je devais taper à la main

Vous pouvez utiliser un modèle littéral (notez les back-ticks). Le littéral prend en charge le multiligne, et vous n'aurez pas besoin d'échapper aux guillemets (vous devrez échapper aux tiques arrière).

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

Exemple:

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>

Vous pouvez également passer des paramètres à la fonction et les insérer dans la chaîne à l'aide de l' interpolation d'expression :

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>

mettez à jour votre fichier JS pour:

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

Lisez ce lien pour plus d'informations: littéraux de modèle

Vous pouvez également utiliser "(une citation) pour ne pas avoir à mettre / mettre en avant chaque"

Utilisez simplement des littéraux de modèle (pas une seule citation "'" mais la coche "" ") comme ceci:

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

Les littéraux de modèle sont des littéraux de chaîne permettant des expressions incorporées. Vous pouvez utiliser des chaînes multi-lignes et des fonctions d'interpolation de chaînes avec elles. Ils étaient appelés «chaînes de modèle» dans les éditions précédentes de la spécification ES2015.

Via - MDN Web Docs

Une autre méthode consiste à utiliser des guillemets simples et à échapper le caractère de nouvelle ligne.

Quelque chose comme ça:

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

Le passage à des guillemets simples vous évite d'échapper aux guillemets doubles dans le code HTML, mais vous devez toujours citer les guillemets simples.

Une autre alternative consiste à utiliser un tableau et .join('')il:

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

Cela vous permet d'ajouter / modifier / supprimer facilement des parties du code ultérieurement.

Ces deux options sont pour ES5 ou plus.

Pour les navigateurs modernes, veuillez utiliser la version ES6 fournie par Ori Drori .