Append html with line breaks is eavyier than appending html with no whitespaces?

user_13904269 0
Viewed 22

I was asking myself which syntax is lighter or is there no differences between :

const html = '
<div class="container">
    <div>
        <input type="text" placeholder="login" />
    </div>
    <div>
        <input type="password" placeholder="password" />
    </div>
</div>
'

$('#global_container').append(html)

and this :

const html = 
'<div class="container">'
    + '<div>'
        + '<input type="text" placeholder="login" />'
    + '</div>'
    + '<div>'
        + '<input type="password" placeholder="password" />'
    + '</div>'
+ '</div>'

$('#global_container').append(html)

In my project, I need to add a huge amount of html if the user press de modify button. That's why I was wondering how do I need to write my html code in my js file.

html jquery
1 Answers

Best option would be to use template-literals, because this gives various options. You can easily use dynamic data if required in future (data coming from APIs etc).

const html = `
<div class="container">
    <div>
        <input type="text" placeholder="login" />
    </div>
    <div>
        <input type="password" placeholder="password" />
    </div>
</div>
`;

Check MDN DOCS:

Coming to your question, I believe the first option would be better, since we don't have to go with different concatenation processes which obviously is a time-complex task.

user_69389690
Related