convert html to html string in JS file

Question

I want to create some html via JS, therefore I need to write the html inside the JS file like:

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

is there a tool or some shortcut to create this type of html string?

I mean, in this case I was needed to type all this html by hand. with + and needed to add " sign.

Something that can convert this:

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

to the first string that I was needed to type by hand

From where will your script get the HTML you want to convert into a string ? — George Bora, Dec 08 '19 at 20:09
This post should answer your problem: https://stackoverflow.com/questions/220603/is-there-a-best-practice-for-generating-html-with-javascript — lainatnavi, Dec 08 '19 at 20:09

Ori Drori · Accepted Answer · 2019-12-11T12:51:03.310

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>

Good Answer, but it's important to say that this is ES6-Syntax which isn't supported by all browsers. So you would need something like [Babel](https://babeljs.io/) to compile your code to browser-compatible JavaScript (ES5). — Alex-HM, Dec 08 '19 at 20:15
This is why I add a link to MDN. They have a compatibility table at the bottom. Currently the only browser that doesn't support template literals is IE. — Ori Drori, Dec 09 '19 at 02:47

maryam · Answer 2 · 2019-12-24T14:51:50.777

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

score 1 · Answer 3 · answered Dec 08 '19 at 20:08

1

You can also use ' (one quote) so you dont have to put / front every "

answered Dec 08 '19 at 20:08

ahmetbcakici

363
6
17

score 1 · Answer 4 · answered Dec 08 '19 at 20:10

Just use template literals (not a single quote "'" but the back-tick "`") like this:

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

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

Via - MDN Web Docs

Ismael Miguel · Answer 5 · 2019-12-09T12:02:28.323

An alternative method is to use single quotes and escape the newline character.

Something like this:

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

Swapping to single quotes saves you from escaping the double quotes in the HTML, but you still need to quote the single quotes.

Another alternative is to use an array and .join('') it:

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

This allows you to easily add/edit/delete parts of the code later on.

Both of these options are for ES5 or older.

For modern browser, please use the ES6 version provided by Ori Drori.

convert html to html string in JS file

5 Answers5