如何使用JavaScript将具有变量的多行html输出到div中？

Question

我想从jquery内部将带有变量的多行html输出到div中，但是它永远不会在div中输出代码块！ 我在其中仅使用了一个变量，即“ itemName”。 谁能告诉我为什么我的代码不适合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>

Answer 1

您的报价和连载不正确。 尝试这个：

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> ";

Answer 2

您在某些行的末尾缺少一些引号，并且可以在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;

Answer 3

您的代码在整个代码中都有错误的引号，因此从技术上讲它是无效的字符串，很可能被拒绝。 另外，您可以通过在每行的末尾加上\\来完成多行字符串，因此您不必担心这么多的引号。

您的代码经过重写并可以正常工作，如下所示：

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;

这是代码的jsFiddle： http : //jsfiddle.net/vkaC8/

Answer 4

从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;

有关模板字面量的更多信息，请参见此处。

如何使用JavaScript将具有变量的多行html输出到div中？

问题描述

4 个解决方案

解决方案1
2 2013-05-10 08:38:59

解决方案2
1 2013-05-10 08:39:23

解决方案3
1 2013-05-10 08:47:12

解决方案4
1 2017-02-15 16:50:55

如何使用JavaScript将具有变量的多行html输出到div中？

问题描述

4 个解决方案

解决方案1 2 2013-05-10 08:38:59

解决方案2 1 2013-05-10 08:39:23

解决方案3 1 2013-05-10 08:47:12

解决方案4 1 2017-02-15 16:50:55

解决方案1
2 2013-05-10 08:38:59

解决方案2
1 2013-05-10 08:39:23

解决方案3
1 2013-05-10 08:47:12

解决方案4
1 2017-02-15 16:50:55