如何使用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, e.g. onclick

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