Get element inside element by class and ID - JavaScript
Well, first you need to select the elements with a function like getElementById
.
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
getElementById
only returns one node, but getElementsByClassName
returns a node list. Since there is only one element with that class name (as far as I can tell), you can just get the first one (that's what the [0]
is for—it's just like an array).
Then, you can change the html with .textContent
.
targetDiv.textContent = "Goodbye world!";
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
You can do it like this:
var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
list[0].innerHTML = "Goodbye world!";
}
or, if you want to do it with with less error checking and more brevity, it can be done in one line like this:
document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";
In explanation:
- You get the element with
id="foo"
. - You then find the objects that are contained within that object that have
class="bar"
. - That returns an array-like nodeList, so you reference the first item in that nodeList
- You can then set the
innerHTML
of that item to change its contents.
Caveats: some older browsers don't support getElementsByClassName
(e.g. older versions of IE). That function can be shimmed into place if missing.
This is where I recommend using a library that has built-in CSS3 selector support rather than worrying about browser compatibility yourself (let someone else do all the work). If you want just a library to do that, then Sizzle will work great. In Sizzle, this would be be done like this:
Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";
jQuery has the Sizzle library built-in and in jQuery, this would be:
$("#foo .bar").html("Goodbye world!");
If this needs to work in IE 7 or lower you need to remember that getElementsByClassName does not exist in all browsers. Because of this you can create your own getElementsByClassName or you can try this.
var fooDiv = document.getElementById("foo");
for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
childNode = fooDiv.childNodes[i];
if (/bar/.test(childNode.className)) {
childNode.innerHTML = "Goodbye world!";
}
}