如何使用JavaScript将具有变量的多行html输出到div中？
[英]How to ouput multi-line html with variable into div using javascript?
问题描述
I want to output this multi line html with variable into div from inside jquery but it never ouput the block of code inside div! 
我想从jquery内部将带有变量的多行html输出到div中，但是它永远不会在div中输出代码块！ I am using only variable inside it which is"itemName". 我在其中仅使用了一个变量，即“ itemName”。 could any one tell me why my code doesn't out to div ? 谁能告诉我为什么我的代码不适合div吗？
var siteContents2 ="<li> +
" <iframe src='<iframe src='http://bsite.com/itemshow.php?"+itemName+"&title=ok&bgcolor=white' height=200 width=200 style='border: none;></iframe><br>+
" <div class="details">+
" <div class="title">+
" <a href="/+itemName/">+itemName</a>+
" </div>+
" </div>+
" </li> ";
document.getElementById("myDiv").innerHTML += siteContents2;
</script>
</head>
<body>
<div id="myDiv"></div>
4 个解决方案
解决方案1
2 2013-05-10 08:38:59
Your quotes and concats are not correct. 您的报价和连载不正确。 try this: 尝试这个：
var siteContents2 ="<li>" +
" <iframe src='<iframe src='http://bsite.com/itemshow.php?"+itemName+"&title=ok&bgcolor=white' height=200 width=200 style='border: none;></iframe><br> "+
" <div class='details'>"+
" <div class='title'>"+
" <a href='/"+itemName+"/'>"+itemName+"</a>"+
" </div>"+
" </div>"+
" </li> ";
解决方案2
1 2013-05-10 08:39:23
You're missing some quotes from the end of some of the lines and you can use either single quotes (') or an escaped double quote (\\") within the html. 您在某些行的末尾缺少一些引号，并且可以在html中使用单引号（'）或转义的双引号（\\“）。
var siteContents2 ="<li> "+
" <iframe src='<iframe src='http://bsite.com/itemshow.php?"+itemName+"&title=ok&bgcolor=white' height=200 width=200 style='border: none;></iframe><br>"+
" <div class='details'>"+
" <div class='title'>"+
" <a href='"+itemName+"'>"+itemName+"</a>"+
" </div>"+
" </div>"+
" </li> ";
document.getElementById("myDiv").innerHTML += siteContents2;
解决方案3
1 2013-05-10 08:47:12
Your code had erroneous quotes throughout it so it was technically an invalid string and most likely being rejected. 您的代码在整个代码中都有错误的引号，因此从技术上讲它是无效的字符串，很可能被拒绝。 In addition, you can do multiline strings by ending each line with a \\ so you don't have to worry about so many quotes. 另外，您可以通过在每行的末尾加上\\来完成多行字符串，因此您不必担心这么多的引号。
Your code, rewritten and working, could look like this: 您的代码经过重写并可以正常工作，如下所示：
var itemName = "blahblah";
var siteContents2 = "<li>\
<iframe src='http://bsite.com/itemshow.php?" + itemName + "&title=ok&bgcolor=white' height=200 width=200 style='border: none;'></iframe>\
<br>\
<div class='details'>\
<div class='title'>\
<a href='" + itemName + "'>" + itemName + "</a>\
</div>\
</div>\
</li>";
document.getElementById("myDiv").innerHTML += siteContents2;
Here's a jsFiddle of the code: http://jsfiddle.net/vkaC8/ 这是代码的jsFiddle： http : //jsfiddle.net/vkaC8/
解决方案4
1 2017-02-15 16:50:55
Since ES6, you can store multi-line variables as template literals by surrounding them with backticks (`s): 从ES6开始，您可以通过用反引号（`s）包围多行变量来将它们存储为模板文字 ：
var siteContents2 =`<li>
<iframe src='<iframe src='http://bsite.com/itemshow.php?`+itemName+`&title=ok&bgcolor=white' height=200 width=200 style='border: none;></iframe><br>
<div class='details'>
<div class='title'>
<a href='`+itemName+`'>`+itemName+`</a>
</div>
</div>
</li> `;
document.getElementById("myDiv").innerHTML += siteContents2;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.