如何使用prototype javascript在另一个div中创建div

我的目标是在另一个div中创建div，但我需要为此使用原型。老实说，我是编程新手。我知道这些对象应该与继承有一些共同点，但我找不到任何解决问题的方法

HTML中有一个代码

<input type="button" value="div" onclick='ND.createDiv()'>
<input type="button" value="divInside" onclick="NDI.insideCreateDiv()">

<div id='main'></div>

---

感谢您抽出时间

我不知道您为什么要使用原型

一种简单的方法是向按钮本身添加任何额外的信息/配置，并在单击侦听器上读取它们的值

var parent=document.querySelector（“#main”）；
document.queryselectoral（“[数据桶]”）.forEach（函数（按钮）{
var type=button.getAttribute（“数据桶”）；
var桶；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
如果（铲斗）返回；
bucket=document.createElement（类型）；
if（button.hasAttribute（“数据文本”））bucket.appendChild（新文本（button.getAttribute（“数据文本”）））；
父.子（bucket）；
});
var childButton=document.querySelector（“[data child='”+type+“]”）；
如果（！childButton）返回；
childButton.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
如果（！bucket）返回；
var child=document.createElement（类型）；
if（childButton.hasAttribute（“数据文本”））child.appendChild（新文本（childButton.getAttribute（“数据文本”）））；
bucket.appendChild（child）；
});
});
首先，我想为错误的解释道歉。过了一段时间，我明白了我到底要做什么，如果有人感兴趣，我会留下一个代码：


const main=document.getElementById（'main'）；
设layer1=null；
设layer2=null；
设layer3=null；
设layer4=null；
类桶{
构造函数（名称、文本）{
this.name=名称；
this.text=文本；
}
第1层（）{
layer1=document.createElement（this.name）；
layer1.innerHTML=this.text；
main.appendChild（第1层）
}
第二层（）{
layer2=document.createElement（this.name）；
layer2.innerHTML=this.text；
第1层。附加子层（第2层）；
}
第3层（）{
layer3=document.createElement（this.name）；
layer3.innerHTML=this.text；
第二层。附加子层（第三层）；
}
第4层（）{
layer4=document.createElement（this.name）；
layer4.innerHTML=this.text；
第3层。附加子层（第4层）；
}
}
常量L1_D=新桶（'div'，'div'）；
const L1_P=新桶（“P”，“段落”）；
常量L1_S=新桶（'span'，'span'）；
常数L1_H=新桶（'h5'，'h5'）；
const L2_D=Object.create（L1_D）；
const L2_P=Object.create（L1_P）；
const L2_S=Object.create（L1_S）；
const L2_H=Object.create（L1_H）；
常量L3\u D=Object.create（L2\u D）；
常量L3\u P=Object.create（L2\u D）；
const L3_S=Object.create（L2_D）；
const L3_H=Object.create（L2_D）；
const L4_D=Object.create（L3_D）；
const L4_P=Object.create（L3_D）；
const L4_S=Object.create（L3_D）；
const L4_H=Object.create（L3_D）

“但我需要使用原型”这是什么意思？你为什么用“这个”？这是一门课吗？有人告诉过你，你必须使用原型进行练习吗？以这种方式做如此琐碎的事情是很不寻常的。此外，您打算如何连接这两个实体（父和子div）？我使用“this”是因为这是我想到的第一个想法，我不确定如何更好地解释这一点，但我会尝试：我需要创建原型路径，从而创建一个包含文本的DOM对象。之后，每次单击按钮时，我都需要这些对象在其中创建另一个对象。这是我见过的最奇怪的练习之一，是的，我被告知要这样做way@willn0rd你能更具体地描述一下你想要的功能吗？你就要这两个按钮好吗？第一个按钮添加一个div，文本为
helloDIV
，第二个按钮在第一个div内添加一个div，文本为
helloInsideDIV
？如果在第一个按钮之前按第二个按钮，会发生什么？如果您多次按下第二个按钮会发生什么情况？我总共有8个（2个div、2个段落、2个span、2个h5）按钮，其余按钮将负责与div按钮相同的事情。第一个按钮create让我们称之为bucket div，然后第二个按钮create div位于前一个按钮中，点击次数与按钮的次数相同。如果在第一个之前单击第二个，则不会发生任何事情。
function Div(text, type){
    this.text = text;
    this.type = type;
}

Div.prototype.createDiv = function(){
    this.type = document.createElement('div');
    this.type.innerHTML = this.text;
    main.appendChild(this.type);
}

Div.prototype.insideCreateDiv = function(){
    let parent = this.type;
    const child = document.createElement('div');
    child.innerHTML = this.text;
    parent.appendChild(child);
}

const ND = new Div('helloDIV', 'div');
const NDI = new Div('helloInsideDIV', 'div');