如何使用jQuery添加多个html标签？

Question

我正在学习jQuery，但DOM还有一些问题。 我有一个包含3行的表，每行有5个内容。 我需要添加第四行及其相应的内容。 这是我的代码在这里输入代码

<table>
  <tr>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
<table>

上面是示例表的工作方式下面是我的jQuery代码

var arrayContent = ['Content1','Content2','Content3','Content4','Content5'];

$('table').append(function(){
  return $('<tr>').append(function(){
     for(var i = 0; i < arrayContent.length; i++){
          return $('<td>')
     }
  })
})

因此，此代码居间仅添加一个标签，而我需要在页面中添加更多标签。 有谁知道我可以如何改进或建议新的方法？

Answer 1

// comments inline

 var arrayContent = ['Content1','Content2','Content3','Content4','Content5']; $('table').append(function(){ return $('<tr>').append(function(){ var td = ''; // create an empty string for(var i = 0; i < arrayContent.length; i++){ td += '<td>' + arrayContent[i] + '</td>'; // compose the table data } return td; }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table></table> 

然后，在浏览器的Web检查器中，您将获得：

Answer 2

这是一个稍微不同的方法：

 var arrayContent = ['Content1','Content2','Content3','Content4','Content5']; function foo() { var dom = '<tr>'; for (var i = 0; i < arrayContent.length; ++i) dom += '<td>' + arrayContent[i] + '</td>'; dom += '</tr>'; $('table').append(dom); } window.onload = foo; // here you can call the function on other events too, eg onclick 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table></table>