[英]What is the most efficient way to create nested div's in Javascript?
Essentially, I'm trying to recreate this code: 基本上,我正在尝试重新创建此代码:
<div class="row" style="-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px; border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px">
<div class="col-lg-12">
<div class="row" style="margin-bottom:10px;">
<div class="col-xs-6">
<center><font size="6">Content</font></center>
</div>
<div class="col-xs-6">
<center>Content</center>
</div>
</div>
<div class="row" style="margin-bottom:10px;">
<div class=" col-xs-4" style="text-align: right;">
<font size="3"><b>Content</b></font>
</div>
<div class="col-xs-8">
<font size="3">Content</font>
</div>
</div>
<div class="row" style="margin-bottom:10px;">
<div class="col-xs-4" style="text-align: right;">
<font size="3"><b>Content</b></font>
</div>
<div class="col-xs-8">
<font size="3">Content</font>
</div>
</div>
<div class="row" style="margin-bottom:10px;">
<div class="col-xs-4" style="text-align: right;">
<font size="3"><b>Content</b></font>
</div>
<div class="col-xs-8">
More Content
</div>
</div>
<button class="btn btn-primary btn-lg btn-block" style="margin-bottom:15px">Launch GPS!</button>
</div>
</div>
to generate every time I enter more information in that gets filled into the places above marked "content". 每当我输入更多信息时生成,这些信息被填充到上面标有“内容”的地方。
My problem isn't writing the javascript to append the data as much as it is creating a way to generate the above code each time I enter in data. 我的问题不是编写javascript来追加数据,因为每次输入数据时都会创建一种生成上述代码的方法。
My thought about how to go about this problem was creating individual variables like so: (this is all inside of a function that gets called to return a finished var with all of these supposed variables strung together in a chain of appendChild functions) 我对如何解决这个问题的思考是创建单独的变量,如下所示:(这都是一个函数内部,它被调用以返回一个已完成的var,所有这些假设的变量在appendChild函数链中串起来)
var divDisplay = document.createElement('div');
divDisplay.className = 'row';
description.setAttribute("style", "-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px; border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px;");
..then do appendChild() calls for further implementation.. like so: ..然后appendChild()调用进一步的实现..像这样:
var divDisplay2 = document.createElement('div');
divDisplay2.className = 'col-lg-12';
divDisplay.appendChild(
divDisplay.appendChild(divDisplay2)
);
But ultimately I get errors, trying to place more content into those append child's. 但最终我得到错误,试图将更多内容添加到那些追加孩子的内容中。
Is there a better way? 有没有更好的办法? Faster way?
更快的方式? Could you should me what you would do to code this?
你能告诉我你要做什么来编码吗?
I would hide the main div element somewhere in html (very like a template), and when user triggers a change, the container div can be read/reused by any selector and put into desired position by $(desiredPlace).html(container)
. 我会在html中隐藏主div元素(非常像模板),当用户触发更改时,任何选择器都可以读取/重用容器div,并通过
$(desiredPlace).html(container)
放入所需位置。 That soution does not result in recreation of nested divs actually. 这个方法实际上不会导致重新嵌套的div。
with pure js: http://jsfiddle.net/c2jghmvk/ 与纯js: http : //jsfiddle.net/c2jghmvk/
Using pure javascript, you can try with innerHTML
like this: 使用纯JavaScript,您可以尝试使用
innerHTML
如下所示:
document.getElementById("parent").onclick= function appendEl(){ var parent = document.getElementById("parent"); parent.innerHTML += "<div class='yourClass'> child </div>"; }
#parent{ border: 1px solid blue; }
<div id="parent" > click to add child in parent </div>
There are plenty of ways to skin this cat but depending on how much you are doing it creating a hidden template and inserting that is probably the easiest option. 有很多方法可以为这只猫提供皮肤,但取决于你做了多少,创建一个隐藏的模板并插入它可能是最简单的选择。 Just add the hidden block to your DOM
只需将隐藏块添加到DOM即可
<div id="template" class="hidden">
<div class="row" style="margin-bottom:10px;">
<div class="col-xs-4" style="text-align: right;">
<font class="contentHeading" size="3"><b>{ContentHeading}</a></font>
</div>
<div class="col-xs-8">
<font class="contentText" size="3">{ContentText}</font>
</div>
</div>
Then pull the HTML out of the template and insert your text 然后从模板中拉出HTML并插入文本
var parentDiv = document.getElementById('someDiv');
var myTemplate = document.getElementById('template');
var newRowHtml = myTemplate.innerHTML.replace('{ContentHeading}', heading).replace('{ContentText}', text);
document.getElementById('someDiv').innerHTML += newRowHtml;
Note that using the string replace function may not be your best option if you have a large template. 请注意,如果您有一个大模板,使用字符串替换功能可能不是您的最佳选择。
Alternatively if you are going to be inserting a lot of content you may be better off using a templating library. 或者,如果您要插入大量内容,最好使用模板库。 There are plenty to choose from but Handlebars code for example would look something like this.
有很多可供选择,但Handlebars代码例如看起来像这样。
var templateSource = document.getElementById("row-template").innerHTML;
var template = Handlebars.compile(templateSource);
Then when you want to insert a row just use 然后当你想插入一行时才使用
var newRowHtml = template({
heading: heading,
text: text
});
document.getElementById('someDiv').innerHTML += newRowHtml;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.