Search code examples
javascriptgetelementbyidgetelementsbyclassname

Get element inside element by class and ID - JavaScript


Alright, I've dabbled in JavaScript before, but the most useful thing I've written is a CSS style-switcher. So I'm somewhat new to this. Let's say I have HTML code like this:

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

How would I change Hello world! to Goodbye world!?

I know how document.getElementsByClassName and document.getElementById work, but I would like to get more specific. Sorry if this has been asked before.


Solution

  • 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>