如何动态创建html元素？

Question

I have an array 我有一个数组

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

I need to create the following elements 我需要创建以下元素

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

How can I do this ? 我怎样才能做到这一点？

PS: My original page has only this array var elms and nothing else. PS：我的原始页面只有这个数组var elms ，没有别的。 I need to create all those divisions and inputs. 我需要创建所有这些划分和输入。 I tried jquery, but messed up with the single and double quotes . 我尝试了jquery，但是弄乱了单引号和双引号。 . 。 so I gave up. 所以我放弃了

Answer 1

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

Start your div ids with a index of 0 ie id="q0" to make indexing easy 以0的索引开始您的div ID，即id="q0"以使索引容易

You can also do this with jquery: 您也可以使用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
 }

If they don't already exists: 如果尚不存在：

 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>"
   );
 }

Answer 2

Working jsFiddle Demo 工作jsFiddle演示

HTML: HTML：

<div id="result"></div>
<input type="button" id="mybutt" value="Go" />

jQuery: jQuery的：

var nextbit, cnt=0;
var elms = ["When?", "Why", "Where", "How"];

$('#mybutt').click(function(){
    $(this).hide(); //Hide the button
    elms.forEach(function(item){
        cnt++;
        nextbit = '<div id="q"'+cnt+'>' +item+ '</div>';
        nextbit +='<input type="text" id="a"'+cnt+'></input>';
        $('#result').append(nextbit);
    });
});

如何动态创建html元素？

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-09-12 01:32:44

解决方案2
2 2014-09-12 01:45:18

如何动态创建html元素？

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-09-12 01:32:44

解决方案2 2 2014-09-12 01:45:18

解决方案1
4 已采纳 2014-09-12 01:32:44

解决方案2
2 2014-09-12 01:45:18