动态生成的html如何获取值

来源：恒创科技编辑：恒创科技编辑部

2024-03-31 03:00:49

要获取动态生成的HTML元素的值，可以使用JavaScript，以下是一些常见的方法：

1、通过ID获取元素值

<!DOCTYPE html>
<html>
<head>
<script>
function getValueById() {
  var element = document.getElementById("myInput");
  var value = element.value;
  alert("输入的值是： " + value);
}
</script>
</head>
<body>
<input type="text" id="myInput">
<button onclick="getValueById()">获取值</button>
</body>
</html>

2、通过类名获取元素值

<!DOCTYPE html>
<html>
<head>
<script>
function getValuesByClassName() {
  var elements = document.getElementsByClassName("myInput");
  for (var i = 0; i < elements.length; i++) {
    var value = elements[i].value;
    alert("输入的值是： " + value);
  }
}
</script>
</head>
<body>
<input type="text" class="myInput">
<button onclick="getValuesByClassName()">获取值</button>
</body>
</html>

3、通过标签名获取元素值（不推荐，因为可能存在多个相同标签名的元素）

<!DOCTYPE html>
<html>
<head>
<script>
function getValuesByTagName() {
  var elements = document.getElementsByTagName("input");
  for (var i = 0; i < elements.length; i++) {
    var value = elements[i].value;
    alert("输入的值是： " + value);
  }
}
</script>
</head>
<body>
<input type="text" class="myInput">
<button onclick="getValuesByTagName()">获取值</button>
</body>
</html>

4、通过name属性获取元素值（适用于一组具有相同name属性的元素）

<!DOCTYPE html>
<html>
<head>
<script>
function getValuesByName() {
  var elements = document.getElementsByName("myInput");
  for (var i = 0; i < elements.length; i++) {
    var value = elements[i].value;
    alert("输入的值是： " + value);
  }
}
</script>
</head>
<body>
<input type="text" name="myInput">
<button onclick="getValuesByName()">获取值</button>
</body>
</html>

本文地址：https://www.henghost.com/jishu/45771/