แปลง html เป็นสตริง html ในไฟล์ JS

ฉันต้องการสร้าง html ผ่าน JS ดังนั้นฉันต้องเขียน html ในไฟล์ 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>";
}

มีเครื่องมือหรือทางลัดบางอย่างเพื่อสร้างสตริง 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>
          `
}

อ่านลิงค์นี้สำหรับข้อมูลเพิ่มเติม: เทมเพลตตัวอักษร

นอกจากนี้คุณยังสามารถใช้ '(หนึ่งคำพูด) ดังนั้นคุณไม่จำเป็นต้องใส่ / ด้านหน้าทุก "

เพียงใช้ตัวอักษรเทมเพลต (ไม่ใช่เครื่องหมายคำพูดเดี่ยว "" "แต่เป็นตัวคั่นหลัง" `") ดังนี้:

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

อีกทางเลือกหนึ่งคือใช้เครื่องหมายคำพูดเดี่ยวและหลีกเลี่ยงอักขระขึ้นบรรทัดใหม่

บางสิ่งเช่นนี้

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 หรือเก่ากว่า

สำหรับเบราว์เซอร์ที่ทันสมัยกรุณาใช้รุ่น ES6ให้โดยOri Drori