CODEWITHSUNDEEP
javascripthtmlcss
Iftek Har
Iftek Har

Reputation: 161

How to target child div by Javascript?

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>

Upvotes: 1

Views: 3473

Answers (8)

Monti
Monti

Reputation: 141

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;

Upvotes: 0

Helge-Kristoffer Wang
Helge-Kristoffer Wang

Reputation: 1

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)

Upvotes: 0

Digvijay Kumar
Digvijay Kumar

Reputation: 1

You can use children() function for this.

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

Upvotes: 0

Sharkfin
Sharkfin

Reputation: 156

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;)

Upvotes: 0

Seba Cherian
Seba Cherian

Reputation: 1793

Please put the comma in between the class names:

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

Upvotes: 0

Mamun
Mamun

Reputation: 68923

You can try with Document​.query​Selector() 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>

Upvotes: 4

Arpit Jain
Arpit Jain

Reputation: 175

Please use querySelector()

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

Upvotes: 1

Artem Mirchenko
Artem Mirchenko

Reputation: 2170

Simplest solution is using querySelector

Example:

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

Upvotes: 0

Related Questions