调用getElementsByTagName后更改innerHTML

我正在尝试更改每个div的innerHTML。我认为代码没有按预期工作。有人能帮我理解为什么这些变化没有发生吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="background: #FFEE05">f</div>
<div style="background:#2B9423 ">d</div>
<div style="background: #0024FF">s</div>
<div style="background: #EF2E31">e</div>
<script>
var dvs=document.getElementsByTagName("div")
dvs.innerHTML="<a href='#'>click here</a>"
</script>
</body>
</html>

getElementsByTagName返回一个数组

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="background: #FFEE05">f</div>
<div style="background:#2B9423 ">d</div>
<div style="background: #0024FF">s</div>
<div style="background: #EF2E31">e</div>
<script>
var dvs=document.getElementsByTagName("div")

for(let i=0;i<dvs.length;i++){
dvs[i].innerHTML="<a href='#'>click here</a>"
}
</script>
</body>
</html>

getElementsByTagName返回一个选定项的数组，您需要对其进行迭代以将值分配给单个元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="background: #FFEE05">f</div>
<div style="background:#2B9423 ">d</div>
<div style="background: #0024FF">s</div>
<div style="background: #EF2E31">e</div>
<script>
var dvs=document.getElementsByTagName("div")
for (let i = 0; i < dvs.length; i++) {
dvs[i].innerHTML="<a href='#'>click here</a>"
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：