使用JavaScript创建动态HTML

Question

I am working on a project, and am required to build HTML code dynamically. 我正在研究一个项目，我需要动态构建HTML代码。

I've got this code in main.js : 我在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());
}

The function main is called once the body is loaded. 一旦加载了主体，就会调用函数main。

I also have a layer.js file with the following code: 我还有一个layer.js以下代码的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');
    }
}

This is used, so that I can dynamically create layers and add text, or more layers to them. 使用它，以便我可以动态创建图层并添加文本或更多图层。 After I call update, it should convert it into HTML. 在我调用update之后，它应该将其转换为HTML。

Using the following 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>

I get nearly the result I am looking for--a DIV, and inside it there is some text saying "Hello, World", and then another DIV. 我几乎得到了我正在寻找的结果 - 一个DIV，里面有一些文字说“Hello，World”，然后是另一个DIV。

However, inside the other DIV I have added the text 'testing...' and another layer/DIV, but it doesn't seem to be showing up. 但是，在其他DIV中我添加了文本'testing ...'和另一个图层/ DIV，但它似乎没有显示出来。

Does anyone know why this is happening? 有谁知道为什么会这样？

Answer 1

In your Layer.prototype.update function make child a local variable: 在你的Layer.prototype.update函数中，make child是一个局部变量：

Change: 更改：

child = this.children[i];

...to: ...至：

var child = this.children[i];

Without a var , let , or const , and since the code is not under use strict rules, the variable child is assumed under global scope. 如果没有var ， let或const ，并且由于代码未use strict规则，则在全局范围内假定变量child 。 And being under global scope, the value bleeds over from one update method execution to another. 并且在全球范围内，价值从一个update方法执行渗透到另一个update方法。

JSBin example JSBin的例子

Answer 2

I have try to create child nodes inside nesting object. 我试图在嵌套对象中创建子节点。 i hope you'll find looking for 我希望你能找到

<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 个解决方案

解决方案1
2 已采纳 2016-06-10 15:08:50

解决方案2
0 2016-06-10 13:52:42

使用JavaScript创建动态HTML

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-06-10 15:08:50

解决方案2 0 2016-06-10 13:52:42

解决方案1
2 已采纳 2016-06-10 15:08:50

解决方案2
0 2016-06-10 13:52:42