如何动态创建html元素？

Buras 发表于 Dev

布拉斯

我有一个数组

var elms = ["When?", "Why", "Where", ......];

我需要创建以下元素

<html .. whatever> 

<div id="q1"> When?  </div>
<input type="text" id="a1"></input>

<div id="q2"> Why?  </div>
<input type="text" id="a2"></input>

<div id="q3"> Where?  </div>
<input type="text" id="a3"></input>

........
</html>

我怎样才能做到这一点？

PS：我的原始页面只有这个数组var elms，没有别的。我需要创建所有这些划分和输入。我尝试使用jquery，但将单引号和双引号弄乱了。。所以我放弃了

杰伊

 var el;
 var idName;
 for(var i = 0; i < elms.length; i++){
   idName = "q" + i;
   el = document.getElementById(idName);
   el.innerHTML = elms[i];
 }

与指数的启动div编号0即id="q0"进行简单的索引

您也可以使用jquery执行此操作：

 var el;
 var idName;
 for(var i = 0; i < elms.length; i++){
   idName = "#q" + i;
   $(idName).html(elms[i]); 
   // items in the html( .. ) can be done only in 
   // newer versions of jquery (I think) correct me if im wrong
 }

如果尚不存在：

 var id;
 for(var i = 0; i < elms.length; i++){
  id = "q" + i;
  $("#containerDiv").append(
   "<div id="+id+">"+elms[i]+"</div><input type=\"text\" id=\"a2\"></input>"
   );
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。