将html文件中的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或更早版本。

对于现代浏览器，请使用Ori Drori提供的ES6版本。