chuyển đổi chuỗi html sang chuỗi html trong tệp JS

Tôi muốn tạo một số html thông qua JS, do đó tôi cần phải viết html bên trong tệp JS như:

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

Có một công cụ hoặc một số phím tắt để tạo loại chuỗi html này không?

Ý tôi là, trong trường hợp này tôi cần phải nhập tất cả html này bằng tay. với +và cần thiết để thêm "dấu hiệu.

Một cái gì đó có thể chuyển đổi này:

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

đến chuỗi đầu tiên mà tôi cần phải gõ bằng tay

Bạn có thể sử dụng một mẫu bằng chữ (lưu ý các dấu kiểm ngược). Nghĩa đen hỗ trợ multiline và bạn sẽ không cần phải thoát dấu ngoặc kép (bạn sẽ cần thoát dấu tích ngược).

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

Thí dụ:

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>

Bạn cũng có thể truyền tham số cho hàm và chèn chúng vào chuỗi bằng phép nội suy biểu thức :

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>

cập nhật tệp JS của bạn thành:

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

Đọc liên kết này để biết thêm thông tin: mẫu chữ

Bạn cũng có thể sử dụng '(một trích dẫn) để bạn không phải đặt / trước mỗi "

Chỉ cần sử dụng mẫu bằng chữ (không phải là một trích dẫn "" "mà là dấu" back "" như thế này:

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

Mẫu chữ là chuỗi ký tự cho phép biểu thức nhúng. Bạn có thể sử dụng các chuỗi đa dòng và các tính năng nội suy chuỗi với chúng. Chúng được gọi là "chuỗi mẫu" trong các phiên bản trước của đặc tả ES2015.

Qua - Tài liệu web MDN

Một phương pháp khác là sử dụng dấu ngoặc đơn và thoát ký tự dòng mới.

Một cái gì đó như thế này:

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

Hoán đổi thành dấu ngoặc đơn giúp bạn thoát khỏi dấu ngoặc kép trong HTML, nhưng bạn vẫn cần trích dẫn dấu ngoặc đơn.

Một cách khác là sử dụng một mảng và .join('')nó:

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

Điều này cho phép bạn dễ dàng thêm / chỉnh sửa / xóa các phần của mã sau này.

Cả hai tùy chọn này đều dành cho ES5 trở lên.

Đối với trình duyệt hiện đại, vui lòng sử dụng phiên bản ES6 được cung cấp bởi Ori Drori .