title: split string by comma and display it after format it
body: <p>for example i have some HTML elements like below</p>
  
  <pre><code>&lt;p&gt; apple,banana,oranger&lt;/p&gt;
  </code></pre>
  
  <p>and i'd like to use the javascript to make it like </p>
  
  <pre><code>&lt;p&gt;apple&lt;/p&gt; &lt;p&gt;banana&lt;/p&gt; &lt;p&gt;orange&lt;/p&gt;
  </code></pre>
  
  <p>How may i achieve this?</p>
  
  <p><strong>UPDATE 1:</strong></p>
  
  <p>I am using other methods to do my task due to some reaseon and it looks as like below</p>
  
  <pre><code>var node = document.getElementById('discovereedKeywords');
  node.innerHTML = node.innerHTML.replace(/,/g, '&lt;p class="tag-item"&gt;');
  </code></pre>
  
  <p>and in reality those <code>&lt;p&gt;</code> tags are actually generate by a for loop, but my method only change the first node it found therefore i tried </p>
  
  <p>Consider the html looks like this </p>
  
  <pre><code> &lt;p class="discovereedKeywords"&gt; apple,banana,oranger&lt;/p&gt;
  
   &lt;p class="discovereedKeywords"&gt; apple,oranger,oranger&lt;/p&gt;
  
   &lt;p class="discovereedKeywords"&gt; kiwi,melon,pinapple&lt;/p&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>for (var i=0; i &lt;data.result.data.length; i++){
  
      var node[i] = document.getElementByClassName('discovereedKeywords');
      node[i].innerHTML = node.innerHTML.replace(/,/g, '&lt;p class="tag-item"&gt;');
  
                  }
  
              }
  </code></pre>
  
  <p>but this those work, why?</p>