javascript - 在html中创建动态id

标签 javascript html

我的 html 和 javascript 代码如下。

<!DOCTYPE html>
<html>
<head>
<style>
        #demo {
            border: 1px solid green;
            padding: 10px;
            margin: 20px;
        }
    </style>
    <style>
        #demo1 {
            border: 1px solid green;
            padding: 10px;
            margin: 20px;
        }
    </style>
<div id ="demo"></div>
<div id ="demo1"></div>
<script>
  var arr_args =  [["ab", "cd"], ["ef", "gh"]];
  var j, x = "";
  for (i=0; i<2; i++) {
    for (j=0; j< 2; j++) {
      x = x + arr_args[i][j] + "<br />"; 
     }
     if(i == 0) {
     document.getElementById("demo").innerHTML = x;
     x="";
     }
     if(i==1) {
        document.getElementById("demo1").innerHTML = x;
    }
  }


</script>
</html>

现在代替我创建演示和 demo1 id。我需要动态执行的代码。任何帮助将不胜感激。

最佳答案

您可以使用如下反引号来获取动态 id

document.getElementById(`demo${i == 0 ? '': i }`).innerHTML = x;

var arr_args = [
  ["ab", "cd"],
  ["ef", "gh"]
];
var j, x = "";
for (i = 0; i < 2; i++) {
  for (j = 0; j < 2; j++) {
    x = x + arr_args[i][j] + "<br />";
  }
  
  document.getElementById(`demo${i == 0 ? '': i }`).innerHTML = x;
  
  if (i == 0) {
    x = "";
  }
}
#demo1 {
  border: 1px solid green;
  padding: 10px;
  margin: 20px;
}

#demo {
  border: 1px solid green;
  padding: 10px;
  margin: 20px;
}
<div id="demo"></div>
<div id="demo1"></div>

关于javascript - 在html中创建动态id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59296120/

相关文章:

html - 如何用 Twitter Bootstrap 导航栏上的图像替换品牌文本?

javascript - 如何让 HTML 链接到浏览器(或系统)指定的 URL?

php - 在二维数组中找到最近的邻居点

html - 为什么我的导航栏没有完全向左延伸?

javascript - AngularJS 计算 JSON 数组中 ID 等于的项目数

javascript - 在 jQuery 中获取滚轮数量

JavaScript 获取元素

php - jQuery 不刷新 IE 中的选项卡内容

javascript - 如何获取具有所有属性的网页正文

javascript - 表单不使用 JS 提交