logo标签列表

使用JavaScript创建动态HTML

javascripthtml
3
我正在做一个项目，需要动态地构建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');
    }
}

这是用来动态创建图层并添加文本或更多图层的。在调用更新后，它应该转换为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，但似乎没有显示出来。
有人知道这是为什么吗？
1
你考虑过使用模板库吗？https://garann.github.io/template-chooser/ - Matt
我未来想要创建的元素将是自定义元素，例如汉堡链接元素、选项卡菜单元素等。因此，对于我正在处理的项目，我不能这样做，因为它需要简单，比如：addTabbedMenu(['page1'，'page2']，等等。 - David Callanan
1
我非常感谢您所提出的问题并非我的回答对象，但是通过使用MVC和模板库，您可以将所有这些内容转换为简单的组件，您可以按照您所描述的方式使用它们。似乎您正在重新发明许多这些框架所提供的功能。在一个MV *示例中，您将创建一个TabbedMenuView，并将目标元素和数据传递给它。 - Matt
1
这可能会有所帮助，但缺点是你需要一段时间来学习这些新技术。如果你的需求很小，那么自己动手的方法可能就足够了（毕竟如果它能工作，谁又能说它是错的呢），但是如果这是一个大型应用程序，在没有框架的情况下，你可能很快就会遇到增长烦恼。 - Matt
1
这不是太多，而且很多看起来都非常特定于这个项目。我现在正在查阅它。 - David Callanan
显示剩余3条评论
2个回答
2
在您的Layer.prototype.update函数中，将child变量设为本地变量：

更改为：

child = this.children[i];

...到：

var child = this.children[i];

如果没有使用 var, let, 或者 const 进行声明，同时代码中没有使用 use strict 严格模式，变量 child 就会被默认为全局作用域。由于在全局作用域下，变量的值会从一个 update 方法执行到另一个方法。

JSBin 示例

0

我尝试在嵌套对象内创建子节点。希望你能找到所需的内容。

<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>
谢谢，但不完全是我想要做的。也许将来会对我有帮助。 - David Callanan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接