使用Js/jQuery创建父子元素

Question

我是js/jquery的初学者。 我想编写这种结构与JS/jQuery的：

<div class="box"> 
    <p>1</p> 
    <div class="content"><span>Lorem</span></div> 
</div> 

<div class="box"> 
    <p>2</p> 
    <div class="content"><span>Ipsum</span></div> 
</div> 

<div class="box"> 
    <p>3</p> 
    <div class="content"><span>Dolor</span></div> 
</div> 

<div class="box"> 
    <p>4</p> 
    <div class="content"><span>Sit</span></div> 
</div> 

<div class="box"> 
    <p>5</p> 
    <div class="content"><span>Amet</span></div> 
</div> 

我有这样的代码：

function addDivs(n) { 

    for(var i=1; i<=n; i++) { 

     var parentP = $("<p>"+i+"</p>"); 
     var parentContent = $("<div class='content'></div>"); 

     var boxClassDiv = document.createElement("div"); 
     document.body.appendChild(boxClassDiv); 
     boxClassDiv.setAttribute("class", "box"); 
     $("body").prepend(boxClassDiv, [parentP, parentContent]); 
     } 
    } 

    window.onload = function getFuncs() { 
     addDivs(16); 
    } 

这里是提琴：https://jsfiddle.net/ds6wj38k/2/

我发现这样并尝试了一些类似的问题添加到我的代码，但我无法调整。

谢谢。

Answer 1

所以首先你需要一个div与box类：

var box = $('<div>').addClass('box'); 

然后你想p了一些：

var p = $('<p>').text(1); 

最后又用content类和span内div：

var content = $('<div>').addClass('content'); 
var span = $('<span>').text('any'); 
content.append(span); 

所以你创建了你需要的元素。组合时间：

var listItem = box.append(p).append(content); 

并添加到body！

$('body').append(listItem); 

最终代码：

function addDivs(n) { 
    for (var i = 1; i <= n; i++) { 
    var box = $('<div>').addClass('box'); 
    var p = $('<p>').text(i); 

    var content = $('<div>').addClass('content'); 
    var span = $('<span>').text('any'); 
    content.append(span); 

    var listItem = box.append(p).append(content); 

    $('body').append(listItem); 
    } 
} 

window.onload = function getFuncs() { 
    addDivs(16); 
} 

退房码在线：http://jsbin.com/xeyugubefu/edit?js,output

Answer 2

这里是我会建议做：

function addDivs(words) { 
    words.forEach(function (word, i) { 
     $('body') 
      .append($('<div>').addClass('box') 
       .append($('<p>').text(i+1)) 
       .append($("<div>").addClass('content').append($('<span>').text(words[i])))); 
    }); 
}; 

$(function getFuncs() { 
    var words = 'Lorem ipsum dolor sit amet'.split(' '); 
    addDivs(words); 
}); 

jQuery旨在支持上述代码演示的方法链接。

请注意，除了使用jQuery构建内容外，您还应该使用jQuery.ready调用代替window.onload，您可以将其编写为$(callback)。