title: How to Get visible element by class?
body: <p>I have no option but javascript. I am sure lots of people went through this.</p>
  
  <p><strong>HTML code</strong></p>
  
  <pre><code>&lt;ul class="recordingslist"&gt;&lt;/ul&gt;
  ..
  ..
  ..
  &lt;div class='test' style="display : none"&gt;
    &lt;ul class="recordingslist test1" &gt;&lt;/ul&gt;
  &lt;/div&gt;
  ..
  ..
  ..
  &lt;div class="testasdasdsad" style="display : none"&gt;
  &lt;ul class="recordingslist test2"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS code</strong> </p>
  
  <pre><code>recordingslist = document.getElementsByClassName("recordingslist")[0];
  </code></pre>
  
  <p>I have many ul with the same class. Now only first ul is visible, I want to append "test" to that visible ul. How can we achieve this?</p>
  
  <p>Thank you very much in advance.</p>