Javascript DOM元素的放置

我下面有一段代码，可以使用多维数组创建

DOM元素

。问题是现在我正在尝试在数组中显示

[“age”]

。但我真的不知道如何操纵它，使其看起来像下图。我知道如何创建DOM元素来显示年龄，但我不知道如何像下图那样显示它。任何帮助都将不胜感激

var personArr=[]；
var person={[“名字”]：“约翰”、[“姓氏”]：“多伊”、[“年龄”]：21、[“爱好”]：[“足球”、“游泳”、“跳舞”]、[“性别”]：“男性”，
[“person desc”]：“
培根ipsum dolor amet短腰肉doner尾部肉饼汉堡肉干
boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person2={
[“名字]：“保罗”，
[“姓氏”]：“洛根”，
[“年龄”]：22，
[“爱好”]：[“露营”、“睡觉”、“吃饭”]，
[“性别]：“男性”，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person3={
[“名字]：“肖恩”，
[“姓”]：“金”，
[“年龄”]：32，
[“爱好”]：[“跑步”、“慢跑”、“攀岩”]，
[“性别]：“男性”，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person4={
[“名字]：“肯”，
[“姓氏]：“周”，
[“年龄”]：12，
[“爱好”]：[“体操”、“电影”、“电视”]，
[“性别]：“男性”，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
人推（人，人2，人3，人4）；
console.log（personArr）；
var parent=document.getElementsByClassName（'line1'）[0]；
var frag=document.createDocumentFragment（）；
每个人（（个人，我）=>{
var name=document.createElement（'h4'）；
var-gender=document.createElement（'h4'）；
var desc=document.createElement（'p'）；
var hobb=document.createElement（'div'）；
var age=document.createElement（'age'）；
var show=document.createElement（'div'）；
var=''；
每人$。个人[‘爱好]，职能（索引）{
嗜好+=（''+人['嗜好][索引]+''）；
});
hobb.className=“隐藏”；
age.className=“square”；
hobb.innerHTML=爱好；
age.innerHTML=`${person['age']}age`；
name.textContent=`name:${person['first-name']}${person['last-name']}`；
desc.textContent=`${person['person-desc']}`；
show.innerHTML=`；
gender.innerHTML=`${person['gender']}`；
frag.appendChild（姓名）；
F.儿童（性别）；
婴儿（年龄）；
框架附件（描述）；
弗拉格·查德（霍伯）；
碎片附体（显示）；
});
父母、子女（frag）；
//
函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
body{font-family:Arial；}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
.line1{
显示：内联块；
}
.尺寸{
宽度：50%；
}
a、 莫林克{
文字装饰：无；
大纲：无；
}
.Morespan内容{
显示：无；
}
h4{
保证金：0；
}
.广场{
宽度：50px；
高度：45px；
字号：18px；
颜色：#81C784；
文本对齐：居中；
背景：透明；
显示：内联块；
边框：1px实心#81C784；
}

人
可能给出正方形的
位置：绝对位置。但要做到这一点，您需要编辑javascript以插入一些分割的父div，您可以给它们一个
位置：relative
。请参阅代码片段


var personArr=[]；
var person={[“名字”]：“约翰”、[“姓氏”]：“多伊”、[“年龄”]：21、[“爱好”]：[“足球”、“游泳”、“跳舞”]、[“性别”]：“男性”，
[“person desc”]：“
培根ipsum dolor amet短腰肉doner尾部肉饼汉堡肉干
boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person2={
[“名字]：“保罗”，
[“姓氏”]：“洛根”，
[“年龄”]：22，
[“爱好”]：[“露营”、“睡觉”、“吃饭”]，
[“性别]：“男性”，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person3={
[“名字]：“肖恩”，
[“姓”]：“金”，
[“年龄”]：32，
[“爱好”]：[“跑步”、“慢跑”、“攀岩”]，
[“性别]：“男性”，
[“person desc”]：“培根一号”