Get element inside element by class and ID – JavaScript

by

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>

More Related Contents:

  1. How to getElementByClass instead of GetElementById with JavaScript?
  2. How to use getElementsByClassName in javascript-function? [duplicate]
  3. What do querySelectorAll and getElementsBy* methods return?
  4. Do DOM tree elements with IDs become global properties?
  5. How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
  6. Iterating over result of getElementsByClassName using Array.forEach
  7. Why don’t we just use element IDs as identifiers in JavaScript?
  8. How to pick element inside iframe using document.getElementById
  9. document.all vs. document.getElementById
  10. getElementById returns null? [closed]
  11. Cannot read property ‘addEventListener’ of null
  12. getElementById() returns null even though the element exists [duplicate]
  13. Strange behavior when iterating over HTMLCollection from getElementsByClassName
  14. Getting the parent div of element
  15. JavaScript getElementByID() not working [duplicate]
  16. Javascript can’t find element by id? [duplicate]
  17. Selecting an element in iframe with jQuery
  18. Javascript getElementById based on a partial string
  19. How to remove a class from elements in pure JavaScript?
  20. chaining getElementById
  21. Getting element by a custom attribute using JavaScript
  22. “getElementById not a function” when trying to parse an AJAX response?
  23. Javascript Append Child AFTER Element
  24. getElementById.contentDocument error in IE
  25. getElementById returning value only for first element [closed]
  26. Mulitple Elements with the same ID
  27. Why is document.GetElementById returning null [duplicate]
  28. Can I use document.getElementById() with multiple ids?
  29. getElementsByClassName to change the style of elements when event occurs [duplicate]
  30. It says that TypeError: document.getElementById(…) is null [duplicate]

Leave a Comment