Change innerhtml of all h2 elements within div

10,854

Solution 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));

Solution 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.

Share:
10,854
Atom Vayalinkal
Author by

Atom Vayalinkal

Updated on June 14, 2022

Comments

  • Atom Vayalinkal
    Atom Vayalinkal almost 2 years

    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>
    
  • Atom Vayalinkal
    Atom Vayalinkal over 11 years
    seems about right. but doesn't seem to work. I've added my full script so you can see if anything is wrong their. Thanks.
  • Atom Vayalinkal
    Atom Vayalinkal over 11 years
    oh wow. at some point i deleted the append part of my script. yours works perfectly. thanks