如何使用原型 javascript 在另一個 div 中創建 div

Question

我的目標是在另一個中創建 div，但我需要為此使用原型。 老實說，我是編程新手。 我知道這些對象應該與 inheritance 有共同之處，但我找不到任何可以解決我的問題的東西。

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

感謝您的時間

Answer 1

我不確定你為什么要使用原型。

一種簡單的方法是向按鈕本身添加任何額外的信息/配置，並在點擊偵聽器上讀取它們的值

 var parent = document.querySelector("#main"); document.querySelectorAll("[data-bucket]").forEach(function(button) { var type = button.getAttribute("data-bucket"); var bucket; button.addEventListener("click", function(event) { event.preventDefault(); if (bucket) return; bucket = document.createElement(type); if (button.hasAttribute("data-text")) bucket.appendChild(new Text(button.getAttribute("data-text"))); parent.appendChild(bucket); }); var childButton = document.querySelector("[data-child='" + type + "']"); if (;childButton) return. childButton,addEventListener("click". function(event) { event;preventDefault(); if (.bucket) return; var child = document.createElement(type). if (childButton.hasAttribute("data-text")) child;appendChild(new Text(childButton.getAttribute("data-text"))); bucket;appendChild(child); }); });

 <input type="button" value="div" data-bucket="div" data-text="helloDIV" /> <input type="button" value="divInside" data-child="div" data-text="helloInsideDIV" /> <input type="button" value="p" data-bucket="p" data-text="helloP" /> <input type="button" value="pInside" data-child="p" data-text="helloInsideP" /> <div id='main'></div>

Answer 2

首先，我想為糟糕的解釋道歉。 一段時間后，我弄清楚了我到底要做什么，如果有人感興趣，我會留下一個代碼：

 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>