js动态生成html

[big_student]

标题可能描述不清楚，我的意思是，现在我很多js里都有很多的createElement与appendChild这样的js代码，来动态生成一些html元素，例如：

<DIV class=header>
<H4>100</H4></DIV>
<DIV class=dialog>100</DIV>
<DIV>100</DIV>

于是就有大量类似这样的js代码：

var xxx = document.createElement("div");
xxx.className = "xxx";
xxx.xxx
.......
xxx.appendChild(xxx);

这样当这个div里面的元素很多时，这样的代码就很多，而且维护也不方便。我也是开始没多久学js，有什么好的方法来减少这样重复的代码量，和提高代码维护的效率。 现在我的想到的是使用模板，把这样的html提取出来做成模板，然后相应的地方填空即可。大家还有什么好方法和建议，请教下！

[猿敲月下码]

如1L所说 直接事先用字符串拼接好

然后innerHTML=字符串 即可

[乌鸦不会飞]

我也在做js动态生成html
学习了。。

[孟子E章]

如果你的html没有规律，你可以使用xx.innerHTML="<div>xxxxxxx</div>"这样的方法

[a260881071]

你可以将所有的HTML代码放在一个长串里就像一楼所说的。

然后就是按你的原来的做法那备注。

思路清晰，排版整齐的话，不会乱的。




--------------------------------------帅签分割线-------------------------------------------------

[weike021996]

学习 xx.innerHTML="<div>**********</div>"

[chchawen]

十分不建议按上面两位的说法做，那样如果innerHTML的内容过多会造成浏览器崩溃。
建议将你所有可以重复用到的标签封装成一个js对象
例如<input></input>
var input= function(name,id,value){
var ip = document.createElement("div");
ip.name = name;
ip.id = id;
ip.value = value;
return ip;
}
具体需要的参数，还有样式需要你自己斟酌
这种面向对象的js写法希望对你js学习有帮助

[chchawen]

[Quote=引用 4 楼 chchawen 的回复:]
十分不建议按上面两位的说法做，那样如果innerHTML的内容过多会造成浏览器崩溃。
建议将你所有可以重复用到的标签封装成一个js对象
例如<input></input>
var input= function(name,id,value){
var ip = document.createElement("div");
ip.name = name;
ip.id = id……
[/Quote]
忘了一点，这样你就可以直接把你创建好的标签对象放入容器标签内
例如
var div = document.createElement("div");
div.appendChild(input);
希望给分

[xiaoYmark]

而且dom这么操作html效率很低

[汉尼拔]

写一些工具函数就好了 啊

[温柔哥]

综合大家的观点,其实肯定是拼接的好些,你也说了 这个div下面有很多元素了..而且是动态的,那样的话每次都要操作一下这个div来append 那样效率肯定不好,如果用拼接的把全部内容拼起来后 就只用append一次了 那样肯定效果高多了..最起码从速度来讲这样快多了..维护其实是要跟你的书写习惯有关的,你写的规范规整 加点注释 就很好维护了,像前面说的封装成一个方法,然后多次调用,这样做其实很好,但是面对你这个情况,还是应该以效率为重.

[wisdomoon]

如果是我会写一个组件