Question

我正在开发一个项目，我需要动态构建HTML代码。

我在main.js：

中获得了此代码

function main() {
    this.dashboard = new Layer("dashboard");
    this.dashboard.addText("Hello, World!");

    this.newLayer = new Layer("somelayer");
    this.anotherLayer = new Layer("somenewlayer");
    this.newLayer.addText('testing...');
    this.newLayer.addLayer(anotherLayer);

    this.dashboard.addLayer(newLayer);

    this.dashboard.update();

    $("#wrapper").html('');
    $("#wrapper").append(this.dashboard.getElement());
}

主体加载后调用函数main。

我还有一个layer.js文件，其中包含以下代码：

function Layer(id) {
    this.id = id;
    this.children = [];
    this.el = null;
}

Layer.prototype.addText = function(text) {
    this.children.push(text);
}

Layer.prototype.addLayer = function(l) {
    this.children.push(l);
}

Layer.prototype.getElement = function() {
    return this.el;
}

Layer.prototype.update = function() {
    this.el = document.createElement('div');
    this.el.className += " layer";
    for (var i = 0; i < this.children.length; i++) {
        child = this.children[i];
        alert('child (' + child + ') is...');
        if(typeof child === 'string') {
            alert('...a string');
            txt = document.createTextNode(child); 
            this.el.appendChild(txt);
        } else {
            alert('...not a string');
            child.update();
            this.el.appendChild(child.getElement());
        }

        alert('um kyankst');
    }
}

使用它，以便我可以动态创建图层并添加文本或更多图层。在我调用update之后，它应该将其转换为HTML。

使用以下HTML ...

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/styles.css".>
        <script src="scripts/jQuery.min.js"></script>
        <script src="scripts/main.js"></script>
        <script src="scripts/layer.js"></script>
    </head>
    <body onload=main()>
        <div id="wrapper"></div>
    </body>
</html>

我几乎得到了我正在寻找的结果 - 一个DIV，里面有一些文字说＆＃34; Hello，World＆＃34;，然后是另一个DIV。

然而，在其他DIV中我添加了文本＆＃39;测试......＆＃39;和另一层/ DIV，但它似乎没有出现。

有谁知道为什么会这样？

Answer 1

在Layer.prototype.update函数中，使child为局部变量：

变化：

child = this.children[i];

...为：

var child = this.children[i];

没有var，let或const，并且由于代码不在use strict规则下，因此假设变量child位于全局范围内。在全球范围内，价值从一个update方法执行渗透到另一个。

JSBin example

Answer 2

我尝试在嵌套对象中创建子节点。我希望你会找到寻找

<script>
    function Layer(id,tagName){
        var scope = this;
        this.tagName = tagName||"div";
        this.elem = false;
        this.children = [];
        this.create = function(id){
            this.elem = document.createElement("div");
            id = id||"";/*you can use generated unique identifyer in here if you want*/
            this.elem.id = id;
        }

        this.addText = function(text){
            text = text||"";
            this.elem.innerHTML = text;
            return this;
        }
        this.addChilds = function(data){
            if(data){
                for(var i=0; i<data.length; i++){
                    var child = new Layer(data[i].id,data[i].tagName).addText(data[i].text);
                    scope.children.push(child); /*to see Layers in console*/
                    scope.elem.appendChild(child.elem);
                }
            }
            return this;
        }
        this.appendTo = function(id){
            document.getElementById(id).appendChild(this.elem);
            return this;
        }
        this.create(id);
    }

    function start(){
        var dashboard = new Layer("dashboard").addText("deneme").addChilds([
            {id:"somelayer",text:"somelayer text",tagName:"div"},
            {id:"somelayer2",text:"somelayer2 text",tagName:"div"}
        ]);
        dashboard.appendTo("wrapper");
    }
    </script>

    <body onLoad="start()">

    <div id="wrapper">
        here is a content for no javascript users
    </div>

    </body>

使用JavaScript创建动态HTML

2 个答案: