扩展 DIV 元素时如何制作多个元素

MyTest.prototype = document.createElement("div");

此行仅执行一次。它创建一个MyTest.prototype对象，该对象也是 DOM 元素<div>。每 MyTest对象将收到相同的原型。因此，您创建的每个MyTest对象都将与您仅创建一次的单个<div>相关联。您必须为每个MyTest创建一个新<div>。

试试这个模式：

MyTest = function() {
    var myDiv = document.createElement("div");
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    myDiv.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
    myDiv.style.position        = "absolute";
    myDiv.style.width           = "500px";
    myDiv.style.height          = height + "px";
    myDiv.style.top             = top + "px";
    top += height;
    document.getElementsByTagName("body")[0].appendChild(myDiv);
    return myDiv;
}

这个函数使用createElement()调用创建一个新的<div>。然后，它会在该新<div>上设置所需的所有属性。最后，它返回您的新<div> 。因此，您可以将其称为

var myNewDiv = MyTest();
var myNewDiv = new MyTest();

这两种选择都有效。在第二种情况下，new 关键字会创建一个虚拟的新对象，但这并不重要，因为在函数中创建的新<div>实际上是返回的。

你正在混合各种东西。首先，检查我对这个SO问题的回答。其次，可以扩展Element对象，但并非所有浏览器都支持。检查这个SO问题。

在我看来，您正计划以某种标准化的方式向document添加元素。您的代码可以重写为（我对其进行了一点修改）：

function appendElement(content,id) {
    var rgb = 'rgb('+ [Math.floor(Math.random() * 256),
               Math.floor(Math.random() * 256),
               Math.floor(Math.random() * 256)].join(',') +')';
    var top  = Math.floor( Math.random() * 300 + 20 );
    var left = Math.floor( Math.random() * 100 + 10 );
    this.style.backgroundColor = rgb;
    this.style.position        = "absolute";
    this.style.width           = "500px";
    this.style.height          = "200px";
    this.style.left            = left+"px";
    this.style.top             = top+"px";
    this.innerHTML             = content || '';
    this.id                    = id || Math.Random*10000+1
    document.getElementsByTagName("body")[0].appendChild(this);
}

现在，您可以使用它使用'appendElement将任何元素附加到document，如下所示：

appendElement.call(document.createElement('div'),'empty div');
appendElement.call(document.createElement('span'),'new empty span','span1');

这会是你瞄准的目标吗？

我找到了一个解决方法，它基本上以相反的方式工作 - 原型是一个空白对象，我将新对象数据复制到构造函数中的div 中：

var height = 20;
var top = 0;
function deepCopy(fromObject, toObject, depth) {
    if(typeof(fromObject) != "object" || typeof(toObject) != "object") {
        // throw "deepCopy only copies objects"
        return;
    }
    if (typeof(depth) == "undefined") {
        depth = 0;
    } else if (depth > 100) {
        // Recursion depth too high. Abort.
        // throw "deepCopy recursion depth cap hit"
        return;
    }
    for (var key in fromObject) {
        if (typeof(fromObject[key]) == "object" && fromObject[key] != null) {
            if (typeof(fromObject[key].nodeType) != "undefined") {
                toObject[key] = fromObject[key].cloneNode(true);
            } else {
                if (typeof(toObject[key]) != "object") {
                    toObject[key] = {};
                }
                deepCopy(fromObject[key], toObject[key], depth + 1);
            }           
        }
        toObject[key] = fromObject[key];
    }
}    
function MyTest() {
    // This is ugly...
    var self = document.createElement("div");
    deepCopy(MyTest.prototype, self);
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    self.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
    self.style.position        = "absolute";
    self.style.width           = "500px";
    self.style.height          = height + "px";
    self.style.top             = top + "px";
    top += height;
    document.getElementsByTagName("body")[0].appendChild(self);
    return self;
}
MyTest.prototype = {};
// MyTest.prototype = document.createElement("div").cloneNode(true);
// MyTest.prototype = new Element();
window.addEventListener(
    "load", 
    function() {
        var a = new MyTest();
        var b = new MyTest();
        var c = new MyTest();
        var d = new MyTest();
    }
);

虽然我觉得我的deepCopy函数是一种相当不优雅（并且可能非常错误）的方式来执行任务，但反过来使用cloneNode（）的方式不起作用。

我最初的问题来自这个：当复制原型时，所有标量值都被复制，而所有对象都被简单地引用（就像复制指针一样，指针值是重复的，但不是它指向的数据）。

希望这对某人有所帮助。