Создание динамического HTML с использованием JavaScript

Я получил этот код в 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()); 
}

Функция основной вызывается один раз загружается тело.

У меня также есть 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 я добавил текст «тестирование ...» и еще один слой/DIV, но он, похоже, не появляется.

Кто-нибудь знает, почему это происходит?

источник

2016-06-10 David Callanan

Рассматривали ли вы использование библиотеки шаблонов? https://garann.github.io/template-chooser/ – Yoda

Элементами, которые я хотел бы создать в будущем, станут пользовательские элементы, такие как элементы ссылок на гамбургер, элементы меню с вкладками и т. Д. Так что для проекта я я не могу этого сделать, потому что это должно быть просто: addTabbedMenu (['page1', 'page2'] и т. д. и т. д.) –

Я ценю, что я не отвечаю на заданный вами вопрос, но используя MVC и библиотеку шаблонов, вы можете превратить все эти вещи в простые компоненты, которые вы можете использовать точно так, как вы описали, похоже, вы изобретаете большую часть функциональных возможностей, предлагаемых многими из этих фреймворков. В примере MV * вы должны создать TabbedMenuView и передать ему целевой элемент и данные – Yoda

В вашей Layer.prototype.update функции делает child локальный переменным:

Изменение:

child = this.children[i];

... чтобы:

var child = this.children[i];

Без var, let, или const, и поскольку код не находится под правилами use strict, переменная child принимается в глобальном масштабе. И, находясь в глобальном масштабе, значение истекает из одного метода update в другое.

JSBin example

источник

2016-06-10 15:08:50 bloodyKnuckles

Спасибо, миллион. Это работает! –

Я попытался создать дочерние узлы внутри объекта вложенности. я надеюсь, что вы найдете ищете

<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>

источник

2016-06-10 13:52:42

Спасибо, но не совсем то, что я пытался сделать. Могу помочь мне в будущем. –

Создание динамического HTML с использованием JavaScript

ответ

Смежные вопросы