javascript - 使用for循环创建div，h3并在javascript中插入数组变量

Question

我正在开发一个网络应用程序，我必须使用 JavaScript 填充用户 friend 列表。我使用以下代码来执行此操作，但我在其中没有获得任何名称，并且仅创建了 div 我还需要创建标题。如何使用 javascript 添加标题并在其中填充值？

$(document).ready(function(){
    var name = ["Amar", "rahul", "vinay"];
    var hobby=["aaa","bbb","ccc"];
    var toAdd = document.createDocumentFragment();
    for(var i=0; i <name.length; i++){
        var newDiv = document.createElement("div");
        var newheading = document.createElement("h2");
        newDiv.id='r'+i;
        newDiv.id='h'+i;
        newDiv.innerHTML = name[i];
        newDiv.className = 'ansbox';
        toAdd.appendChild(newDiv);
    }
    document.getElementById('sel').appendChild(toAdd);

Answer 1

请尝试此代码

$(document).ready(function(){
  var name = ["Amar", "rahul", "vinay"];
  var hobby=["aaa","bbb","ccc"];
  var toAdd = document.createDocumentFragment();
  for(var i=0; i <name.length; i++){
     var newDiv = document.createElement("div");
     var newheading = document.createElement("h2");
     newheading.innerText = hobby[i];
     newDiv.id='r'+i;
     newDiv.id='h'+i;
     newDiv.innerHTML = name[i];
     newDiv.className = 'ansbox';
     toAdd.appendChild(newheading);
     toAdd.appendChild(newDiv);
 }

document.getElementById('sel').appendChild(toAdd) });

Fiddle

希望这对您有帮助。