How to target child div by Javascript?

Question

I want to apply JavaScript on sticky header in my site. For this I want to target a div inside sticky div by JavaScript. Please let me know how to target a dive that is inside some other divs by JavaScript.

var yourHTML = '<div class="mynewdiv">Test</div>';
document.getElementsByClassName('at-sticky' 'custom-logo-link') 
[0].innerHTML = yourHTML;

<div class="at-sticky"> 
  <div class="container"> 
    <div class="navbar-header"> 
      <a href="#" class="custom-logo-link" 
      rel="home" itemprop="url">
        <img src="#" class="custom-logo">
      </a>
    </div>
  </div>
</div>

What is ' ' ?

Roko C. Buljan
– Roko C. Buljan

2019-05-16 08:54:47 +00:00
Commented May 16, 2019 at 8:54 — Roko C. Buljan
– Roko C. Buljan, Commented May 16, 2019 at 8:54

Mamun · Accepted Answer · 2019-05-16 09:00:07Z

4

You can try with Document.querySelector() which allows CSS like selector:

var yourHTML = '<div class="mynewdiv">Test</div>';
document.querySelector('.at-sticky .custom-logo-link').innerHTML = yourHTML;

<div class="at-sticky"> 
  <div class="container"> 
    <div class="navbar-header"> 
      <a href="#" class="custom-logo-link" 
      rel="home" itemprop="url">
        <img src="#" class="custom-logo">
      </a>
    </div>
  </div>
</div>

edited May 16, 2019 at 9:00

answered May 16, 2019 at 8:48

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

2 Comments

Iftek Har Over a year ago

In my case .at-sticky class is loading by Javascripting when scroll down. Maybe that is the reason it is not working on my end.

Mamun Over a year ago

@IftekHar, it is really difficult to tell what the issue could be without observing that:)

Arpit Jain · Accepted Answer · 2019-05-16 08:50:28Z

1

Please use querySelector()

var yourHTML = '<div class="mynewdiv">Test</div>';
document.querySelector('.at-sticky .custom-logo-link').innerHTML = yourHTML;

answered May 16, 2019 at 8:50

Arpit Jain

1755 bronze badges

Comments

Artem Mirchenko · Accepted Answer · 2019-05-16 08:48:13Z

0

Simplest solution is using querySelector

Example:

document.querySelector('.at-sticky .container .custom-logo-link').innerHTML = yourHTML

answered May 16, 2019 at 8:48

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

Comments

Seba Cherian · Accepted Answer · 2019-05-16 09:02:59Z

0

Please put the comma in between the class names:

document.getElementsByClassName('at-sticky', 'custom-logo-link')[0].innerHTML = yourHTML;

answered May 16, 2019 at 9:02

Seba Cherian

1,7938 silver badges18 bronze badges

Comments

Sharkfin · Accepted Answer · 2019-05-16 09:06:42Z

0

Ok 2 points: Firstly when using innerHTML you are inserting text into your element, not the full tag as you have done. Secondly you only need pass in to ‘document.getElementsByClassnames’ the class name that you are targeting. Dont worry about the parent div, that should work fine as is. I would have posted a comment but I don’t have enough reputation yet;)

answered May 16, 2019 at 9:06

Sharkfin

1561 silver badge7 bronze badges

Comments

Digvijay Kumar · Accepted Answer · 2019-05-16 09:11:00Z

0

You can use children() function for this.

$('.at-sticky').children();

answered May 16, 2019 at 9:11

Digvijay Kumar

1

Comments

Helge-Kristoffer Wang · Accepted Answer · 2021-03-09 08:35:49Z

0

You can use querySelector for this.

Let's say you have the following HTML structure

<div class="parentDiv">
  <a href="#"></a>
</div>

Then you can do this in JavaScript

let parentDiv = document.querySelector('.parentDiv')
let childLink = parentDiv.querySelector('a')

console.log(childLink)

answered Mar 9, 2021 at 8:35

Helge-Kristoffer Wang

11 bronze badge

Comments

Monti · Accepted Answer · 2023-11-28 01:54:54Z

0

Tip: Try printing the container's output using console.log, then scroll down to see the list of childNodes.

If you want to target the .custom-logo-link class, you must include the tag in the querySelector.

document.querySelector('.at-sticky a.custom-logo-link').innerHTML = yourHTML;

answered Nov 28, 2023 at 1:54

Monti

1411 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to target child div by Javascript?

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related