cannot create div content dynamically

Question

What is wrong here?

var str = "
<div class='lorem'>lorem</div>
<br>
<div class='ipsum'>ipsum</div>
";

$('.parent').html(str);

.parent{
width:50%;
margin:14px auto;
background:#eee;
}

.lorem{
cursor:cell;
background:gold;
}

.ipsum{
cursor:cell;
background:lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent'>

</div>

Error:

Uncaught SyntaxError: Invalid or unexpected token...

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Your str variable is wrong. After each line close quotes and add + or use `` instead of "" — Observer, Jul 23 '18 at 13:13
Possible duplicate of [Creating multiline strings in JavaScript](https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) — Andreas, Jul 23 '18 at 13:14

score 1 · Accepted Answer · edited Jul 23 '18 at 13:19

You can't have line breaks in strings unless you use a template literal.

var str = "
  <div class='lorem'>lorem</div>
  <br />
  <div class='ipsum'>ipsum</div>
";

should be

const str = `
  <div class='lorem'>lorem</div>
  <br />
  <div class='ipsum'>ipsum</div>
`;

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

In the case that you don't want to use this (I don't know why you wouldn't), you could also do these:

var str = "<div class='lorem'>lorem</div>" + "<br />" + "<div class='ipsum'>ipsum</div>";

var str = ["<div class='lorem'>lorem</div>", "<div class='ipsum'>ipsum</div>".join("<br />");

var str = `
<div class='lorem'>lorem</div>
<br>
<div class='ipsum'>ipsum</div>
`;

$('.parent').html(str);

.parent{
width:50%;
margin:14px auto;
background:#eee;
}

.lorem{
cursor:cell;
background:gold;
}

.ipsum{
cursor:cell;
background:lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>

</div>

Mamun · Answer 2 · 2018-07-24T08:52:48.557

Since your string is in multi-line, either you have to use string concatenation (+) or use Template literals:

Using Template Literals:

var str = `
<div class='lorem'>lorem</div>
<br>
<div class='ipsum'>ipsum</div>
`;

$('.parent').html(str);

.parent{
width:50%;
margin:14px auto;
background:#eee;
}

.lorem{
cursor:cell;
background:gold;
}

.ipsum{
cursor:cell;
background:lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent'>

Using String Concatenation (+):

var str = ""+
"<div class='lorem'>lorem</div>"+
"<br>"+
"<div class='ipsum'>ipsum</div>"+
"";

$('.parent').html(str);

.parent{
width:50%;
margin:14px auto;
background:#eee;
}

.lorem{
cursor:cell;
background:gold;
}

.ipsum{
cursor:cell;
background:lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent'>

</div>

score 0 · Answer 3 · answered Jul 23 '18 at 13:21

var str = '<div class="lorem">lorem</div><br><div class="ipsum">ipsum</div>';
$('.parent').html(str);

.parent{
width:50%;
margin:14px auto;
background:#eee;
}

.lorem{
cursor:cell;
background:gold;
}

.ipsum{
cursor:cell;
background:lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent'>

</div>

cannot create div content dynamically

3 Answers3