Obtaining all innerHTML of <h2> Tags and Listing It

Question

Ok, I have a JavaScript issue and I'm unsure on how to get it started of. What I want to do is basically create a JavaScript that checks the innerHTML of all <h2> tags on a page and have it in a dropdown list.

This is what I have so far:

<script type="text/javascript">
function getData() {
    var post = document.getElementsByTagName('h2')[0].innerHTML;
    document.getElementById('result').innerHTML = 'H2 Contents<br>' + post + '<br>';
}
</script>

I've also set up a JS fiddle so you get an idea of what it doesn't do and to make your job easier. This is how a line that contains looks like (all of them are the same):

<center><h2><span>People Nowdays...</span></h2></center>

I tried changing getElementsByTagName from h2 to span but still didn't work. Funniest part is the fiddle works >_> http://jsfiddle.net/eJbf4/

Answer 1

jsFiddle Demo

If you wanted to display all of the h2 tags, you would iterate the set of elements in a loop and build the result like this:

var posts = document.getElementsByTagName('h2');
 for( var i = 0; i < posts.length; i++ ){
    document.getElementById('result').innerHTML += 'H2 Contents<br>' + posts[i].innerHTML + '<br>';
}

Also, you have defined a function, but never call it so the code never executes.

getData();//execute the function

demo of call

Answer 2

I've updated your fiddle. http://jsfiddle.net/eJbf4/2/

getData();

function getData() {
    var post = document.getElementsByTagName('h2')[0].innerHTML;

document.getElementById('result').innerHTML = 'H2 Contents<br>' + post + '<br>';
}

You are never calling your getData() function...

Answer 3

Try this :

function getData() {
    var post = document.getElementsByTagName('h2');
    var res = 'H2 Contents<br>';
    for(var i=0; i<post.length; i++) {
        var v = post[i].innerHTML;
        res +=  v + '<br>';
    }
    document.getElementById('result').innerHTML = res;
}
getData();

Demo

Answer 4

Loop through it:

 function getData() {
  var post = document.getElementsByTagName('h2'), h2s = '';
      for(x=0, y = post.length; x < y; x+=1){
       console.log(post[x].innerHTML);
       h2s += post[x].innerHTML + '<br/>';
       }
 document.getElementById('result').innerHTML = 'H2 Contents<br>' + h2s;
     }
     getData();

DEMO

Answer 5

Try this: http://jsfiddle.net/eJbf4/5/

function createList () {
    var i, length, els = document.querySelectorAll('h2'),
        sel = document.getElementById('mySelect');
    for (i=0, length = els.length; i < length; i++) {
        var op = document.createElement('option');
        op.innerText = op.value = els[i].innerText;
        sel.appendChild(op);
    }
}
createList();

Answer 6

Here's a way to do this ... everyone else seems to be using createElement calls, but those can break down in performance over time...

To be specific, this creates a dropdown list (select list):

function getData() {
    // First, get a reference to your h2 tags
    var h2s = document.getElementsByTagName('h2');
    // then a reference to the div you want to put your select list
    var resultDiv = document.getElementById('result');
    // string concatenation is faster than creating nodes individually,
    // so we create a select list with a placeholder here
    var selectList = "<select>{0}</select>";
    var options = "";
    // cycle through your collection of h2 nodes
    for(var iH2 = 0; iH2 < h2s.length; iH2++){
        // get the content from the current h2
        var content = h2s[iH2].innerHTML;
        // add an option node with the content inserted to our options string
        options += "<option>" + content + "</option>";
    }
    // replace the placeholder with the options string
    selectList = selectList.replace("{0}",options);
    // now add the hold select tag to the innerHTML of results
    resultDiv.innerHTML = selectList;
}

getData();

(My jsFiddle: http://jsfiddle.net/mori57/RNTfA/ )