How do I assign a HTML string over multiple lines in Javascript?

Question

I have to assign an HTML string through the following Javascript code. However, this seems to be possible only if I put all the HTML on one line.

This works:

var assignedhtml = "<div> <p>It's the most beautiful thing I've seen in my life </p> <p> It's watermalone </p> </div>"

This does not work:

var assignedhtml = "<div>
                    <p>It's the most beautiful thing I've seen in my life </p>
                    <p> It's watermalone </p>
                    </div>"

The issue is that I have too many lines my html code. In the past, I have individually removed all the \n (newline) characters. Is there a simpler way to achieve the variable assignment I intend without having to individually go through the lines and delete the newline characters?

i.e., I want to keep the html code on the right as is in the second case above, but remove the newlines before assigning it to the variable.

actually.. no. javascript string must be normally in one line. You can however use an escape charatcer `` to split it into more lines, but still this does not help you, as you also have to do this manually stackoverflow.com/questions/805107/… — Asped
– Asped, Commented Mar 11, 2014 at 15:14

Cody Brumfield · Accepted Answer · 2014-03-11 15:15:35Z

1

There's no equivalent to, for instance, PHP's heredoc but you can add backslashes to escape the hard returns:

var assignedhtml = "<div>\
  <p>It's the most beautiful thing I've seen in my life </p>\
  <p> It's watermalone </p>\
  </div>";

Here's a working example: http://jsfiddle.net/9W6BS/

answered Mar 11, 2014 at 15:15

Cody Brumfield

4974 silver badges10 bronze badges

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

Comments

Vasiliy vvscode Vanchuk · Accepted Answer · 2014-03-11 15:18:10Z

0

One more variant - use '\' symbol at the and of line

Valid code example

    var assignedhtml = "<div>\
            <p>It's the most beautiful thing I've seen in my life </p>\
            <p> It's watermalone </p>\
            </div>"

Also want to note, that some tools ( like webStorm or PhpStorm) allow to edit such injections in normal mode ( Alt + enter - edit HTML Fragment )

answered Mar 11, 2014 at 15:18

Vasiliy vvscode Vanchuk

7,1992 gold badges24 silver badges46 bronze badges

1 Comment

user3423805 Over a year ago

thanx for note about Storm

Serlite · Accepted Answer · 2014-03-11 15:23:12Z

0

You can do it like this:

var assignedhtml = '<div>' +
'<p>It\'s the most beautiful thing I've seen in my life</p>' +
'<p>It\'s watermelon</p>' +
'</div>';

edited Mar 11, 2014 at 15:23

Serlite

12.3k5 gold badges40 silver badges50 bronze badges

answered Mar 11, 2014 at 15:10

vdwijngaert

1,55511 silver badges24 bronze badges

Collectives™ on Stack Overflow

How do I assign a HTML string over multiple lines in Javascript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related