我如何定位我的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

脚本中的问题很少，您两次使用class 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

您可以使用use .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