Changing innerHTML after calling getElementsByTagName

Question

I'm trying to change the innerHTML of each div. I'm not seeing the code work as intended. Can anybody help me understand why the changes are not occurring?

<!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` returns a collection of dom objects. Every div on the page. You can't set the HTML of all of them like that. — SpeedOfRound, Apr 07 '20 at 18:31

score 3 · Answer 1 · answered Apr 07 '20 at 18:32

3

getElementsByTagName returns an array

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

answered Apr 07 '20 at 18:32

DCR

14,737
12
52
115

thank for you answer – hossein Apr 07 '20 at 18:38
in the future you should try to search for these answers first before posting a question. Accept the answer if it works for you. thanks. – DCR Apr 07 '20 at 18:45

score 2 · Answer 2 · answered Apr 07 '20 at 18:32

2

getElementsByTagName return an array of selected items, you need to iterate over it to assign value to individual element.

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

answered Apr 07 '20 at 18:32

Jasdeep Singh

7,901
1
11
28

thank for you answer its work for me – hossein Apr 07 '20 at 18:37
whats the let before i in for – hossein Apr 07 '20 at 18:38
1

let is used to create variables like var. Difference is we can create block scope variable using let keyword. please find reference here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let – Jasdeep Singh Apr 07 '20 at 18:39
ok ! tnx a lot for your answer – hossein Apr 07 '20 at 18:42

Changing innerHTML after calling getElementsByTagName

2 Answers2