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.

Improve this question
0

12 Answers 12

Reset to default
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)

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

+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).
@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.
Andrew, @no - Using class as a variable name does not work in Safari, so it does currently have an impact.
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.
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
|
197

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.

Improve this answer

1 Comment

For IE8 you may use querySelectorAll.
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.

Improve this answer

2 Comments

@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.
document.querySelector works in IE8 and above: caniuse.com/queryselector
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'; }
Improve this answer

Comments

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.");
Improve this answer

Comments

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; }
Improve this answer

Comments

3 

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

Improve this answer

2 Comments

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

Improve this answer

Comments

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>
Improve this answer

Comments

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

Improve this answer

2 Comments

if you have only a handful of elements in your page, otherwise this is O(N) solution
getAttribute('class') seems to work in all but IE, then getAttribute('className') works in IE
-2

jQuery handles this easy.

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

It changes all the .myclass elements to that text.

Improve this answer

2 Comments

PS: the question says ".I don't want to use jQuery for this."
Ok, i didn't see that.
-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.

Improve this answer

2 Comments

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.
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 :-)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.