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

자세한 내용은이 링크를 읽으십시오. 템플릿 리터럴

또한 '(한 따옴표)를 사용할 수 있으므로 모든'

다음과 같이 템플릿 리터럴 (작은 따옴표 " '"가 아니라 백틱 "`")을 사용하십시오.

// 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 웹 문서

다른 방법은 작은 따옴표를 사용하고 개행 문자를 이스케이프 처리하는 것입니다.

이 같은:

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 버전 에서 제공하는 오리 Drori을 .