Change innerhtml of all h2 elements within div

Question

This is probably a stupid mistake, but i can't seem to get this to work. I'm trying to change the innerhtml of all the H2 elements withing the div whose id=variable id.

var numberOfQuestions = $('.question').length;
  var id = "question"+(numberOfQuestions);
  clone.id=id;
  document.documentElement.getElementById(id).getElementsByTagName( "h2" ).innerhtml= "Question"+(numberOfQuestions);

I think I'm doing something wrong here: document.documentElement.getElementById(id).getElementsByTagName( "h2" ).innerhtml= "Question"+(numberOfQuestions); The nrtire script:

 <script type="text/javascript">

function copyAppendRow() {
  var question = document.getElementById("question");
  var clone=question.cloneNode(true);
  var numberOfQuestions = $('.question').length;
  var id = "question"+(numberOfQuestions);
  clone.id=id;
  var questiondiv = document.getElementById(id);
var h2s = questiondiv.getElementsByTagName("h2");
for(var h = 0; h < h2s.length; h++ ) {
  h2s[h].innerHTML = "Question"+(numberOfQuestions); }
  if($('#questionsuccess').css('display') == 'none'){
  $('#questionsuccess').fadeIn('fast');
 $('#questionsuccess').fadeOut(4000);
  }
  }

</script>

Answer 1

do you mean something like:

var divEle = document.getElementById("yourDivId");
var h2s = divEle.getElementsByTagName("h2");
for(var h = 0; h < h2s.length; h++ ) {
  h2s[h].innerHTML = "Question"+(numberOfQuestions);
}

OR jQuery way:

$("#"+yourDivId + " > h2").html("Question"+(numberOfQuestions));

Answer 2

I see from your first line that you are already using jQuery, so make life easy for yourself and use it to do this task.

$('#' + id + ' h2').html( 'Question ' + numberOfQuestions );

The jQuery selectors work just like CSS selectors. So this line of code finds the element with your variable id as its' id and gets all the h2 tags within that element. .html is a jQuery method that sets the inner HTML of an element.