title: CSS or jQuery: How to add a fade effect to an element got with getElementById?
body: <p>I think this is a pretty simple question.</p>
  
  <p>I have a script which replace a text on my website. I would love to add a fade-effect while replacing. What should I do?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var target = document.getElementById('target');
  var titles = [
    'Text1',
    'Text2',
    'Text3'
  ];
  
  function newTitle () {
      var i = (Math.random() * titles.length) | 0;
      target.innerText = titles[i];
  }
  
  newTitle();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;p id="target"&gt;&lt;/p&gt;
  &lt;button onclick="newTitle()"&gt;Replace&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>