CODEWITHSUNDEEP
javascript
user3282537
user3282537

Reputation: 99

How can I Target parent and child class I javascript

<div id="inst4" class="block_navigation  block">
    <div class="content">
      <div> Content Start here !!!</div>
    </div>
</div>

<script>
        var blockNav = document.getElementsByClassName("block_navigation")[0].getElementsByClassName("content");
            blockNavIcon = document.createElement("img");
            blockNavIcon.setAttribute("src", blockIcon);
            blockNav.appendChild(blockNavIcon);  
        }
</script>

Here I am targeting content class, but it is not working, How can i do this any solution.

Upvotes: 0

Views: 47

Answers (2)

brk
brk

Reputation: 50326

You can use use .getElementsByClassName("content")[0]

Hope this wil be helpful 

var blockIcon = "http://weknowyourdreams.com/images/forest/forest-04.jpg";
     var blockNav = document.getElementsByClassName("block_navigation")[0]
    .getElementsByClassName("content")[0]; // Will select the child element
    blockNavIcon = document.createElement("img");
                blockNavIcon.setAttribute("src", blockIcon);
                blockNav.appendChild(blockNavIcon)

JSFIDDLE

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388416

There are few problems in your script, you are using the class block_navigation twice, also blockNav is a NodeList

You can easily use .querySelector()

 var blockNav = document.querySelector(".block_navigation .content");
 blockNavIcon = document.createElement("img");
 blockNavIcon.setAttribute("src", '//placehold.it/64');
 blockNav.appendChild(blockNavIcon);
<div id="inst4" class="block_navigation  block">
  <div class="content">
    <div>Content Start here !!!</div>
  </div>
</div>

Upvotes: 1

Related Questions