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
– George Bora, Commented Dec 8, 2019 at 20:09
This post should answer your problem: stackoverflow.com/questions/220603/… — lainatnavi
– lainatnavi, Commented Dec 8, 2019 at 20:09

Ori Drori · Accepted Answer · 2019-12-11 12:51:03Z

9

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>

edited Dec 11, 2019 at 12:51

answered Dec 8, 2019 at 20:07

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex-HM Over a year ago

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 to compile your code to browser-compatible JavaScript (ES5).

Ori Drori Over a year ago

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.

maryam · Accepted Answer · 2019-12-24 14:51:50Z

3

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

edited Dec 24, 2019 at 14:51

answered Dec 8, 2019 at 20:15

maryam

1611 gold badge1 silver badge15 bronze badges

Comments

ahmetbcakici · Accepted Answer · 2019-12-08 20:08:33Z

1

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

answered Dec 8, 2019 at 20:08

ahmetbcakici

4131 gold badge7 silver badges18 bronze badges

Comments

AndrewL64 · Accepted Answer · 2019-12-08 20:10:20Z

1

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

answered Dec 8, 2019 at 20:10

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

Comments

Ismael Miguel · Accepted Answer · 2019-12-09 12:02:28Z

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.

Collectives™ on Stack Overflow

convert html to html string in JS file

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related