How to display multiple elements to html using javascript?

Question

When I try to print elements found by function, just the first one is being printed.

Tried multiple printing methods. For now alert() is working fine, but I can't copy the content.

    function test() {
       var x = document.getElementsByClassName("but b_yt");
       for (i = 0; i < x.length; i++) { 
          alert(x[i]);
       }
    }

Every other printing methods doesn't print at all, prints just first one or something like [HTML Data Collection] . console.log works, but it gives me the whole HTML code of button.

Answer 1

You can get href attributes this way:

let elements = document.getElementsByClassName('but b_yt');

for(let i = 0; i < elements.length; i++) {
    let element = elements[i];
    console.log(element.getAttribute('href'));
}

Answer 2

There's an easy solution using jQuery's show() method, as it shows all elements of a given class:

$('.but b_yt').show();

Answer 3

may be a noob approach this will give you innerhtml of each h1

<h1 class="abc">hello</h1>
<h1 class="abc">helsfvdfbbdfbdlo</h1>

`

var s = document.getElementsByClassName('abc');

for (i = 0; i < s.length; i++) {
    console.log(document.getElementsByClassName('abc')[i].innerText);
}