Creating dynamic HTML using JavaScript

Question

I am working on a project, and am required to build HTML code dynamically.

I've got this code in 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.

I also have a layer.js file with the following code:

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.

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

However, inside the other DIV I have added the text 'testing...' and another layer/DIV, but it doesn't seem to be showing up.

Does anyone know why this is happening?

Have you considered using a templating library? garann.github.io/template-chooser — Matt
– Matt, Commented Jun 10, 2016 at 13:17
The elements which I would like to create in the future will be custom elements such as hamburger link elements, tabbed menu elements etc. So for the project I'm working on I cannot do it like that because it needs to be simple like: addTabbedMenu(['page1','page2'], etc. etc.) — David Callanan
– David Callanan, Commented Jun 10, 2016 at 13:20
I appreciate that I am not answering the question you have specifically asked, but by using MVC and a templating library you can make all of these things into simple components which you can use in exactly the way you have described, it seems like you are reinventing much of the functionality offered by many of these frameworks. In an MV* example you would create a TabbedMenuView and pass it the target element and data — Matt
– Matt, Commented Jun 10, 2016 at 13:24
It might help, the downside is that there will be a period of time where you have to learn those new technologies, if your requirement is a small one then your homebrew approach might be just fine (if it works then who is to say it's wrong afterall), however if this is a large application, you might start to get growing pains fairly quickly without a framework in place — Matt
– Matt, Commented Jun 10, 2016 at 13:30
It's not too much, and a lot of it seems very specific to this project. I'm looking it up now. — David Callanan
– David Callanan, Commented Jun 10, 2016 at 13:31

bloodyKnuckles · Accepted Answer · 2016-06-10 15:13:55Z

2

In your Layer.prototype.update function make child a local variable:

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. And being under global scope, the value bleeds over from one update method execution to another.

JSBin example

edited Jun 10, 2016 at 15:13

answered Jun 10, 2016 at 15:08

bloodyKnuckles

12.2k4 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Güven Altuntaş · Accepted Answer · 2016-06-10 13:52:42Z

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>

Thank you, but not exactly what I was trying to do. Might help me in the future though.

Collectives™ on Stack Overflow

Creating dynamic HTML using JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related