title: A lot of span tags inside a contenteditable div
body: <p>I want to make a textfield with a lot of words that are editable. Each word should be able to have a different color. I also need to do some other css changes on each word e.g. change font per word.</p>
  
  <p>I have the list of words in a javascript array. I make a lot of spans inside the a contenteditable div. I loop through the array and assign each words to the each span with javascript. </p>
  
  <p>However, when I have a lot of words, the scroll in the div gets very slow. Does anyone know how to fix this? Or have another solution?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div contenteditable id="editor"&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong> </p>
  
  <pre><code>var text = ['one', 'two', 'three'];
  
  
  function printwords(){
        for (var i = 0, len = text.length; i &lt; len; i++){
            var dataSpan = document.createElement('span');
            document.getElementById('editor').appendChild(dataSpan);
            dataSpan.setAttribute("id", i+"id");
            $('#'+i+'id').css('background', 'rgba(255, 0, 0, 0.5)');
            document.getElementById(i+'id').innerHTML = text[i]+' ';
        };
      };
      printwords();
  </code></pre>