250

I want to replace the contents within a html element so I'm using the following function for that:

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

The above works great but the problem is I have more than one html element on a page that I want to replace the contents of. So I can't use ids but classes instead. I have been told that javascript does not support any type of inbuilt get element by class function. So how can the above code be revised to make it work with classes instead of ids?

P.S. I don't want to use jQuery for this.

0

12 Answers 12

203

This code should work in all browsers.

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }
}

The way it works is by looping through all of the elements in the document, and searching their class list for matchClass. If a match is found, the contents is replaced.

jsFiddle Example, using Vanilla JS (i.e. no framework)

8
  • 5
    +1 - Good catch with the spaces, I always forget to do that... going to steal that for my answer ;) class is a reserved word in javascript though; you shouldn't use it for a variable name even though it really doesn't do any harm (yet). Commented Sep 28, 2010 at 0:36
  • 1
    @no with that function you don't have to have any content inside the element you want to replace. You can have a string in there or you can have it empty. Either way the replacement text will suddenly appear there when the function is called.
    – Taylor
    Commented Sep 28, 2010 at 0:47
  • 4
    Andrew, @no - Using class as a variable name does not work in Safari, so it does currently have an impact.
    – user113716
    Commented Sep 28, 2010 at 0:50
  • 4
    The array returned by getElementsBytagName has also a length property, for which the className/indexOf test is then done as well. Although this is not a problem in this case, a regular for loop would be more correct. Commented Mar 6, 2013 at 15:56
  • 1
    instead of indexOf with spaces, saving elems[i].className in, say var cn and using cn && cn.match(new RegExp("(^|\\s)" + matchClass + "(\\s|$)")) would work better because it matches any whitespace (space, non-breaking space, tab, etc.) while also allowing first/last class names to be matched. Example: jsfiddle.net/AXdtH/1636
    – Ky -
    Commented Nov 30, 2014 at 23:49
196

Of course, all modern browsers now support the following simpler way:

var elements = document.getElementsByClassName('someClass');

but be warned it doesn't work with IE8 or before. See http://caniuse.com/getelementsbyclassname

Also, not all browsers will return a pure NodeList like they're supposed to.

You're probably still better off using your favorite cross-browser library.

1
125
document.querySelectorAll(".your_class_name_here");

That will work in "modern" browsers that implement that method (IE8+).

function ReplaceContentInContainer(selector, content) {
  var nodeList = document.querySelectorAll(selector);
  for (var i = 0, length = nodeList.length; i < length; i++) {
     nodeList[i].innerHTML = content;
  }
}

ReplaceContentInContainer(".theclass", "HELLO WORLD");

If you want to provide support for older browsers, you could load a stand-alone selector engine like Sizzle (4KB mini+gzip) or Peppy (10K mini) and fall back to it if the native querySelector method is not found.

Is it overkill to load a selector engine just so you can get elements with a certain class? Probably. However, the scripts aren't all that big and you will may find the selector engine useful in many other places in your script.

2
  • @Taylor: I think it works in IE8 (not 100% sure - too lazy to google it). Regardless, I added some info regarding backwards compatibility using third party selector engines. Commented Sep 28, 2010 at 0:32
  • 19
    document.querySelector works in IE8 and above: caniuse.com/queryselector
    – Zeke
    Commented Dec 21, 2012 at 4:38
26

A Simple and an easy way

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.innerHTML = 'this is value';
}
0
5

I'm surprised there are no answers using Regular Expressions. This is pretty much Andrew's answer, using RegExp.test instead of String.indexOf, since it seems to perform better for multiple operations, according to jsPerf tests.
It also seems to be supported on IE6.

function replaceContentInContainer(matchClass, content) {
    var re = new RegExp("(?:^|\\s)" + matchClass + "(?!\\S)"),
        elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (re.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

replaceContentInContainer("box", "This is the replacement text.");

If you look for the same class(es) frequently, you can further improve it by storing the (precompiled) regular expressions elsewhere, and passing them directly to the function, instead of a string.

function replaceContentInContainer(reClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (reClass.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

var reBox = /(?:^|\s)box(?!\S)/;
replaceContentInContainer(reBox, "This is the replacement text.");
4

This should work in pretty much any browser...

function getByClass (className, parent) {
  parent || (parent=document);
  var descendants=parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}

You should be able to use it like this:

function replaceInClass (className, content) {
  var nodes = getByClass(className), i=-1, node;
  while (node=nodes[++i]) node.innerHTML = content;
}
3

var elems = document.querySelectorAll('.one');

for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = 'content';
};

2
  • 4
    That's not really an answer. Please try to explain your code. Furthermore, it's basically a more compact version of another answer to this question that was posted 5 years ago.
    – helmbert
    Commented May 12, 2015 at 15:45
  • I dont know what is the problem. This answer is ok. There is no comment... and what? This is not gold rule. And what you want comment here? And But is it readable code?
    – AntiCZ
    Commented Jul 23, 2015 at 10:56
3

I assume this was not a valid option when this was originally asked, but you can now use document.getElementsByClassName('');. For example:

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

See the MDN documentation for more.

3

There are 3 different ways to get elements by class in javascript. But here for your query as you have multiple elements with the same class names you can use 2 methods:

  1. getElementsByClassName Method - It returns all the elements with the specified class present in the document or within the parent element which called it.

    function ReplaceContentInContainer(className, content) {
        var containers = document.getElementsByClassName(className);
        for (let i = 0; i < containers.length; i++) {
            containers[i].innerHTML = content;
        }
    }
    ReplaceContentInContainer('box', 'This is the replacement text');
    
    <div class='box'></div>
    
  2. querySelectorAll Method - It select element on the basic of CSS selectors. Pass your CSS class to it with a dot and it will return all the element having specified class as an array-like object.

    function ReplaceContentInContainer(className, content) {
        var containers = document.querySelectorAll(`.${className}`);
        for (let i = 0; i < containers.length; i++) {
            containers[i].innerHTML = content;
        }
    }
    ReplaceContentInContainer('box', 'This is the replacement text');
    
    <div class='box'></div>
    
0

I think something like:

function ReplaceContentInContainer(klass,content) {
var elems = document.getElementsByTagName('*');
for (i in elems){
    if(elems[i].getAttribute('class') == klass || elems[i].getAttribute('className') == klass){
        elems[i].innerHTML = content;
    }
}
}

would work

2
  • 1
    if you have only a handful of elements in your page, otherwise this is O(N) solution
    – jwl
    Commented Sep 28, 2010 at 0:26
  • getAttribute('class') seems to work in all but IE, then getAttribute('className') works in IE Commented Sep 28, 2010 at 1:13
-2

jQuery handles this easy.

let element = $(.myclass);
element.html("Some string");

It changes all the .myclass elements to that text.

2
  • PS: the question says ".I don't want to use jQuery for this."
    – Julian
    Commented May 1, 2020 at 13:40
  • Ok, i didn't see that. Commented May 3, 2020 at 15:18
-15

When some elements lack ID, I use jQuery like this:

$(document).ready(function()
{
    $('.myclass').attr('id', 'myid');
});

This might be a strange solution, but maybe someone find it useful.

2
  • 3
    If there are multiple elements with class myclass, all of them will obtain the id myid, but ids should be unique! Moreover, OP explicitly says to avoid jQuery.
    – Oriol
    Commented Jun 22, 2014 at 23:27
  • 1
    It's not hard to add a foreach() clause and increment ID, if you have multiple elements of the same class. I added this solution as an alternative for those, who can use jQuery. OP already got a bunch of suitable answers anyway :-)
    – The Krotek
    Commented Jun 23, 2014 at 7:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.