javascript - 如何使用原型 javascript 在另一个 div 中创建 div

Question

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

HTML中有一段代码

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

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

还有JavaScript代码

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

感谢您的时间

标签： javascripthtmlprototype

Answer 1

首先，我想为糟糕的解释道歉。一段时间后，我弄清楚了我到底要做什么，如果有人感兴趣，我会留下一个代码：

const main = document.getElementById('main');

let layer1 = null;
let layer2 = null;
let layer3 = null;
let layer4 = null;

class Bucket{
    constructor(name, text){
        this.name = name;
        this.text = text;
    }

    Layer1(){
        layer1 = document.createElement(this.name);
        layer1.innerHTML = this.text;
        main.appendChild(layer1)
    }

    Layer2(){
        layer2 = document.createElement(this.name);
        layer2.innerHTML = this.text;
        layer1.appendChild(layer2);
    }

    Layer3(){
        layer3 = document.createElement(this.name);
        layer3.innerHTML = this.text;
        layer2.appendChild(layer3);
    }

    Layer4(){
        layer4 = document.createElement(this.name);
        layer4.innerHTML = this.text;
        layer3.appendChild(layer4);
    }
}


const L1_D = new Bucket('div', 'div');
const L1_P  = new Bucket('p', 'paragraph');
const L1_S  = new Bucket('span', 'span');
const L1_H  = new Bucket('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);

const L3_D = Object.create(L2_D);
const L3_P = Object.create(L2_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);

<input type='button' value='1 Layer' onclick='L1_D.Layer1(); this.onclick=null;'>
    <input type='button' value='2 Layer' onclick='L2_D.Layer2(); this.onclick=null;'>
    <input type='button' value='3 Layer' onclick='L3_D.Layer3(); this.onclick=null;'>
    <input type='button' value='4 Layer' onclick='L4_D.Layer4(); this.onclick=null;'>
    
    <input type="button" value="Reload Page" onClick="document.location.reload(true)">

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