CODEWITHSUNDEEP
javascripthtml
user7461846
user7461846

Reputation:

cannot create div content dynamically

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

Upvotes: 0

Views: 44

Answers (3)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 0

Gabor
Gabor

Reputation: 572

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>

Upvotes: 0

Baruch
Baruch

Reputation: 2428

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>

Upvotes: 1

Related Questions