How to replace multiple occurrences of innerHTML of a div using javascript?

Question

For a div that appears multiple times in your HTML :

<div class="myclass">abc</div>
<div class="myclass">abc def</div>
...

How can I achieve the replacement of "abc" for all the occurrences ? (I found resources to replace the first occurrence but not the rest)

This is my code with javascript method

<script>
 function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
     window.onload = func;
   } else {
     window.onload = function() {
       if (oldonload) {
         oldonload();
       }
       func();
     }
   }
 } 

 addLoadEvent(function() {  

    oldText = document.getElementsByClassName("myclass").innerHTML; 
    for (i = 0; i<oldText.length; i++){ 
    newText = oldText[i].innerHTML;
    newText = newText.replace(/abc/g, "123");
    oldText[i].innerHTML = newText;

    });
</script>

There is literally no jquery in that example? It's vanilla javascript but your also loading jquery for no reason! What exactly is the question here, does that not work? — Liam
– Liam, Commented Jan 11, 2017 at 14:59
yes it is not working, i am trying to find a good method to replace the inner text in the div that occurs multiple times. Maybe I confused myself between jquery and JS... — KillM
– KillM, Commented Jan 11, 2017 at 15:02
Your code works, just remove .innerHTML from document.getElementsByClassName("myclass") — Alexandru Severin
– Alexandru Severin, Commented Jan 11, 2017 at 15:04

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-11 15:03:59Z

Here is solution:

The problem is at this line: oldText = document.getElementsByClassName("myclass").innerHTML;

.innerHTML method returns HTML content.

You only need to get elements by class name, and obtain a nodeList.

oldText = document.getElementsByClassName("myclass");

function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
     window.onload = func;
   } else {
     window.onload = function() {
       if (oldonload) {
         oldonload();
       }
       func();
     }
   }
 }
 addLoadEvent(function() {  
    oldText = document.getElementsByClassName("myclass"); 
    for (i = 0; i<oldText.length; i++){ 
      newText = oldText[i].innerHTML;
      newText = newText.replace(/abc/g, "123");
      oldText[i].innerHTML = newText;
    }
 });

<div class="myclass">abc</div>
<div class="myclass">abc def</div>

Abhay Maurya · Accepted Answer · 2017-01-12 07:35:56Z

0

target every class, split value, remove 0 index and concatenate.

  $('.myclass').each(function(){
       var data = $(this).val();
       var data_array = data.split();
       var new = '';
       for(var i=1; i<data_array.length; i++){
          var _new += ' '+data_array[i];
       }
       $(this).val(_new);
    });

edited Jan 12, 2017 at 7:35

answered Jan 11, 2017 at 15:03

Abhay Maurya

12.3k9 gold badges50 silver badges67 bronze badges

2 Comments

Liam Over a year ago

I don't think the OP wants jquery. He doesn't know what it is

Alexandru Severin Over a year ago

new is a keyword and cannot be used as a variable name.

Collectives™ on Stack Overflow

How to replace multiple occurrences of innerHTML of a div using javascript?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related