Как настроить целевой родительский и дочерний класс I javascript

Question

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

Здесь я настроен на класс контента, но он не работает. Как я могу это сделать.

Answer 1

Есть несколько проблем в вашем сценарии, вы используете класс block_navigation дважды, также blockNav является NodeList

Вы можете легко использовать .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>

Answer 2

Вы можете использовать использование .getElementsByClassName("content")[0]

Надеется, что это Виль быть полезным

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