html'yi html dizesine JS dosyasında dönüştürme

JS ile bazı html oluşturmak istiyorum, bu nedenle html gibi JS dosyasının içine yazmak gerekiyor:

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 dizesi bu tür oluşturmak için bir araç veya bazı kısayol var mı?

Yani, bu durumda tüm bu html'yi elle yazmam gerekiyordu. ile +ve "işareti eklemek için gerekli .

Bunu dönüştürebilecek bir şey:

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

elle yazmam gereken ilk dizeye

Bir şablon hazır bilgisi kullanabilirsiniz (arka kenelere dikkat edin). Değişmez çok satırlı desteği destekler ve tırnak işaretlerinden kaçmanıza gerek kalmaz (geri kenelerden kaçmanız gerekir).

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

Misal:

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>

Parametreleri işleve iletebilir ve ifade enterpolasyonunu kullanarak dizeye ekleyebilirsiniz :

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 dosyanızı şu şekilde güncelleyin:

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

Daha fazla bilgi için bu bağlantıyı okuyun: şablon değişmez değerleri

Ayrıca '(bir alıntı) kullanabilirsiniz böylece her koymak / ön koymak zorunda değilsiniz "

Sadece şablon değişmez değerlerini kullanın (tek bir alıntı "'" değil, "" "geri işareti):

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

Şablon değişmez değerleri, gömülü ifadelere izin veren dize değişmez değerleridir. Çok satırlı dizeleri ve dize enterpolasyon özelliklerini kullanabilirsiniz. ES2015 spesifikasyonunun önceki sürümlerinde bunlara "şablon dizeleri" adı verildi.

Via - MDN Web Dokümanları

Alternatif bir yöntem tek tırnak işareti kullanmak ve satırsonu karakterinden kaçmaktır.

Bunun gibi bir şey:

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

Tek tırnak işaretleri arasında geçiş yapmak, HTML'deki çift tırnak işaretlerinden kaçmanızı önler, ancak yine de tek tırnakları alıntılamanız gerekir.

Başka bir alternatif de bir dizi kullanmaktır .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());

Bu, daha sonra kodun parçalarını kolayca eklemenizi / düzenlemenizi / silmenizi sağlar.

Bu seçeneklerin her ikisi de ES5 veya daha eski sürümler içindir.

Modern tarayıcı için lütfen Ori Drori tarafından sağlanan ES6 sürümünü kullanın .