时间戳

首页 > 解决方案 > 调用 getElementsByTagName 后更改 innerHTML

javascript - 调用 getElementsByTagName 后更改 innerHTML

问题描述

我正在尝试更改innerHTML每个div. 我没有看到代码按预期工作。谁能帮我理解为什么没有发生变化？

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

标签： javascript

解决方案

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>

推荐阅读