Javascript 如何在我创建的原始框旁边创建新框？

我一直在做一个演示算术序列的项目。用户输入序列的起始项、差异以及他们想要生成的项数，代码将生成序列。我想将每个术语放在一个块中，如下所示：

然而，上面显示的示例是硬编码版本。我希望序列自己生成，并且可以由用户自定义。但是，我遇到了一个问题：生成的新块替换了旧块。我有没有办法生成新的而不是替换它们

代码：

var t0，差，boxedNums，numOfTerms，redCircle，redTriangle，redRectangle，blueCircle，blueTriangle，blueRectangle；
红色圆圈=”；
红色三角形=”；
redRectangle=“t'+n+''+tn+''
}
函数showButton（）{
document.getElementById（'buildButton'）。style.display=''；
}

.center{
文本对齐：居中；
}
#康斯坦茨控制{
背景颜色：淡绿色；
边界半径：10%；
}
#方程式{
背景颜色：黄色；
文本对齐：居中；
边界半径：10%；
}
身体{
背景颜色：浅蓝色；
}
#公式{
背景颜色：黄色；
}
跨度{
显示：块；
}
#盒装{
边框：1px实心；
}
.tn{
字号：3em；
}
#无形的{
可见性：隐藏；
}

作业10a2
公式：
t
n=t0+d*n


t
0

d

n


生成

这将在旧框旁边添加新框。 在buildNextOne（）函数中所做的更改

var t0，差，boxedNums，numOfTerms，redCircle，redTriangle，redRectangle，blueCircle，blueTriangle，blueRectangle；
红色圆圈=”；
红色三角形=”；
redRectangle=“t'+n+''+tn+''；
document.getElementById（“boxArea”）.appendChild（nodediv）；
}
函数showButton（）{
document.getElementById（'buildButton'）。style.display=''；
}

.center{
文本对齐：居中；
}
#康斯坦茨控制{
背景颜色：淡绿色；
边界半径：10%；
}
#方程式{
背景颜色：黄色；
文本对齐：居中；
边界半径：10%；
}
身体{
背景颜色：浅蓝色；
}
#公式{
背景颜色：黄色；
}
跨度{
显示：块；
}
#盒装{
边框：1px实心；
}
.tn{
字号：3em；
}
#无形的{
可见性：隐藏；
}

作业10a2
公式：
t
n=t0+d*n


t
0

d

n


生成