親要素と子要素を作成する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/

私はこのようないくつかの同様の質問を発見してみました私のコードに追加するが、私は調整することはできません。

ありがとうございました。

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

そして最後に内部クラスcontentとspanとdiv：次に

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

は、あなたが数とpたい：すべての

Answer 1

だから、最初は、クラスboxで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を使用してコンテンツを構築する以外に、window.onloadをjQuery.readyコールに置き換える必要があります。これは$(callback)と書くことができます。