Javascript 使用Js/jQuery创建父元素和子元素

我是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);
    }

函数addDivs（n）{
对于（var i=1；i，首先需要一个带有类
框的
div
：

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

最后是一个
div
，里面有class
content
和
span
：

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

并添加到
正文

$('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);
}

函数addDivs（n）{
对于（var i=1；i，我建议这样做：

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);
});

函数addDivs（字）{
words.forEach（函数（word，i）{
$（“正文”）
.append（$（''）.addClass（'box'））
.append（$（“”）.text（i+1））
.append（$（''）.addClass（'content'）.append（$（''）.text（words[i]）；
});
};
$（函数getFuncs（）{
var words=‘Lorem ipsum door sit amet’。拆分（“”）；
addDivs（文字）；
});

jQuery被设计为支持方法链接，上面的代码演示了这一点

请注意，除了使用jQuery构建内容外，还应将
window.onload
替换为
jQuery.ready
调用，您可以将其编写为
$（回调）
在使用jQuery时，请尝试使用jQuery函数。因此，不要使用
document.createElement
或
appendChild
。有jQuery函数可用于此。感谢您的建议，我将尝试使用jQuery编写更多代码。类似->
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);
}

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);
});