如何使用javascript输出带变量的多行html到div中？

我想输出这个多行html与变量div从jquery里面，但它永远不会输出div内的代码块！我只在里面使用变量“itemName”。任何人都可以告诉我为什么我的代码没有出到div？如何使用javascript输出带变量的多行html到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>

来源

2013-05-10 user1788736

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

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

来源

2013-05-10 08:38:59 krampstudio

谢谢。它运行良好。你能告诉我如何追加这些

块，所以他们排列成5行。现在它们被打印在一个下面！ – user1788736 2013-05-10 09:33:07

不明白你的意思 – krampstudio 2013-05-10 09:46:07

我试图将sitecontents2附加到页面主体中的div，因为我多次调用这个脚本，并且想要将这些输出排列在5行。现在，每次我调用它的脚本时每个iframe低于彼此。我的目标是连续5个iframe！ – user1788736 2013-05-10 09:51:04

你从某些行的末尾缺少一些报价，您可以在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;

来源

2013-05-10 08:39:23 ashfp

你的代码中有错误的引号，所以它在技术上是一个无效的字符串，并且很可能会被拒绝。另外，你可以通过结束每行\来做多行字符串，所以你不必担心这么多引用

您的代码，重写和workin克，看起来是这样的：

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/

来源

2013-05-10 08:47:12

您的代码甚至未输出iframe！ – user1788736 2013-05-10 09:25:11

啊，你说的没错，对不起。 iframe被输出，但它的标记是无效的，因为你的代码是最初的问题没有尾随''在这部分：'style ='border：none;''当我复制/编辑代码我didn不知道那是失踪。：/我添加了撇号并添加了一个jsFiddle，以便您可以检查我的版本，如果您觉得喜欢它。 – 2013-05-10 17:56:24

由于ES6，您可以通过反引号包围它们存储多行变量模板文字（单曲）：

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;

更多关于模板文字here。

来源

2017-02-15 16:50:55

如何使用javascript输出带变量的多行html到div中？

回答

相关问题