个人中心
gpt4 book ai didi

javascript - 如何动态创建html元素？

转载 作者：行者123 更新时间：2023-11-28 12:28:04 25 4
gpt4 key购买 nike

我有一个数组

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];
 }

以索引 0 开始您的 div id，即 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>"
   );
 }

关于javascript - 如何动态创建html元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25799389/

25 4 0
文章推荐： javascript - 从列表动画中删除节点
文章推荐： javascript - 从字符串执行 jquery 命令而不使用 eval()
文章推荐： html - 在其他标签的多级中选择某一类型的第一个标签
文章推荐： javascript - 无法在 JavaScript 中使用我的 php 变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com