动态创建多个div并分配id

Question

我目前正在尝试使用jquery动态创建div。我有一个名为createDivs的函数，它接受一个x名称数组。我想为每个名称创建一个div，并为通过数组传入的div id=”new-name”分配。所有动态创建的div都附加到<div id=”main”></div>。然而到目前为止，div已经创建，但名称放在每个div中。如何为每个div指定一个名称并附加到main？

function createDivs (divName) {
          for (var i=0, len=divName.length; i < len; i++) {
        $('#main').append('div').addClass('new-'+divName)
      }
}

调用函数

createDivs(['navBar', 'footer', 'sidePanel', 'socialFeed']);

当前输出

<div id="main">
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
</div>

期望的输出

<div id="main">
<div id="navBar"></div> 
<div id="footer"></div> 
<div id="sidePanel"></div>
<div id="socialFeed"></div> 
</div>

Answer 1

变化：

$('#main').append('div').addClass('new-'+divName)

要

var $div = $("<div>", { id: divName[i] });
$('#main').append($div);