Question

我通过迭代一些Json数据使用jQuery动态生成链接。

MyCode：

var content = "<table>";
$.each(dataArray, function( index, value )
{
     content = content+"<tr><td>"+value.Version+"</td><td><a href="+value.Download+"> Download</a></td></tr>";
}); 
content = content+"</table>";
$('#tablediv').append(content);

它应该生成一个表格，其中第二列的链接为：

＆LT; a href =“link to url”＆gt;下载＆lt; / A＆GT;

但它会将其生成为：

＆LT; a href =“link to url”＆gt;＆lt; / A＆GT;下载

所以我需要在开始和结束标记之间使用文本，但它出现在结束标记之后。如何解决这个问题？

Answer 1

您需要在href属性中添加单引号。

content += "<tr><td>"+value.Version+"</td><td><a href='"+value.Download+"'> Download</a></td></tr>";

Answer 2

您需要在引号中包含value.Download：

"... <a href=\"" + value.Download + "\">Download</a> ...";

Answer 3

$(document).ready(function(){
var content = "<table>";
  var dataArray=[{Version:1,Download:"asdsa"},{Version:2,Download:"tete"}];
$.each(dataArray, function( index, value )
{
  var $row=$("<tr>");
  var $rowcellVersion= $("<td>").text(value.Version);
  var $rowcellContent= $("<td>");
  var $anchorTag = $("<a>").text("Download")
                           .attr("href",value.Download)  
                           .appendTo($rowcellContent);
  
  $rowcellVersion.appendTo($row);
  $rowcellContent.appendTo($row);
  
  content = content + $row[0].outerHTML;
  
}); 
content = content+"</table>";
$('#tablediv').append(content);
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="tablediv"></div>

处理元素创建的一种更清洁的方式。也可以在页面检查器中检查HTML。这是预期的方式

Answer 4

如果您在第一时间使用jQuery，可以使用jQuery

var content = $("<table>");
$.each(dataArray, function( index, value )
{
  content.append($("<tr />")
     .append($("<td />").text(value.Version))
     .append($("<td />").append(
              $("<a />").attr("href",value.Download).text(value.Version))
);
$('#tablediv').append(content);

动态生成的链接中的文本出现在结束标记之后

4 个答案: