convert html to html string in JS file
update your JS file to:
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>
`
}
Read this link for more information: template literals
You can use a template literal (note the back-ticks). The literal supports multiline, and you won't need to escape the quotes (you'll need to escape back-ticks).
`<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>`
Example:
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>
You can also pass parameters to the function, and insert them to the string using expression interpolation:
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>