How to add html element in specific element with Javascript

Hi,

I am trying to add some custom html content to specific element in Discourse template. I will use it for dropdown menu.

I have to add this element under specific li tag.

<div id="dropdown">
  <a title="Documentation" href="#" target="_blank">Developer</a>
  <span class="caret"></span>
  <div class="dropdown-content">
    <a title="API Docs" href="#" target="_blank">API</a>
    <a title="SDK Docs" href="#" target="_blank">SDK</a>
    <a title="Developer Blog" href="#" target="_blank">Blog</a>
    <a title="Developer Changelog" href="#" target="_blank">Changelog</a>
    <a title="Developer Survey" href="#" target="_blank">Survey</a>
  </div>
</div>

Anyway to working with document.getElementsByClassName or similar?