JSファイルでHTMLをHTML文字列に変換する

JSを介してHTMLを作成したいので、次のようにJSファイル内にHTMLを書き込む必要があります。

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

詳細については、このリンクをお読みください： テンプレートリテラル

'（1つの引用符）を使用することもできるので、すべてを前に置く必要はありません "

次のように、テンプレートリテラル（単一引用符 "'"ではなくバックティック "` "）を使用するだけです。

// 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仕様の以前のエディションでは「テンプレート文字列」と呼ばれていました。

経由-MDN Webドキュメント

別の方法は、単一引用符を使用して改行文字をエスケープすることです。

このようなもの：

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以前のものです。

最新のブラウザについては、Ori Droriが提供するES6バージョンを使用してください。