使用JavaScript創建動態HTML

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以下代碼的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，里面有一些文字說“Hello，World”，然后是另一個DIV。

但是，在其他DIV中我添加了文本'testing ...'和另一個圖層/ DIV，但它似乎沒有顯示出來。

有誰知道為什么會這樣？

Answer 1

在你的Layer.prototype.update函數中，make child是一個局部變量：

更改：

child = this.children[i];

...至：

var child = this.children[i];

如果沒有var ， let或const ，並且由於代碼未use strict規則，則在全局范圍內假定變量child 。 並且在全球范圍內，價值從一個update方法執行滲透到另一個update方法。

JSBin的例子

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 個解決方案

解決方案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