contenteditable div中有很多span标签

Question

我想创建一个包含许多可编辑单词的文本字段。 每个单词应能够具有不同的颜色。 我还需要对每个单词进行其他一些CSS更改，例如，每个单词更改字体。

我有一个javascript数组中的单词列表。 我在一个contenteditable div内进行了很多调整。 我遍历数组，并使用javascript将每个单词分配给每个范围。

但是，当我有很多单词时，div中的滚动会变得很慢。 有谁知道如何解决这一问题？ 还是有其他解决方案？

HTML：

 <div contenteditable id="editor">

    </div>

JS：

var text = ['one', 'two', 'three'];


function printwords(){
      for (var i = 0, len = text.length; i < 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();

Answer 1

您的实际代码存在一些问题：

• 您正在创建一个span元素，将其附加到editable div上，然后为其提供更多属性，或编辑其属性，最好是创建该元素，更改其属性，然后最后将其附加到DOM。
• 您正在创建一个元素，给它一个id ，然后您将使用$('#'+i+'id')和document.getElementById()从具有给定id的DOM中两次获取该元素，这是您在这里过分杀伤，您已经在变量中包含了元素，为什么要再次尝试通过id获取它，只需使用dataSpan变量即可。

因此，您的实际代码可以正常工作，但数组中包含大量项目，这会导致性能下降 ，这就是div中的滚动变得非常慢 。

这应该是您的代码：

function printwords() {
  for (var i = 0, len = text.length; i < len; i++) { 
    var dataSpan = document.createElement('span');
    dataSpan.setAttribute("id", i + "id");
    dataSpan.style.background = 'rgba(255, 0, 0, 0.5)';
    dataSpan.innerHTML = text[i] + ' ';

    document.getElementById('editor').appendChild(dataSpan);
  };
};

演示：

 var text = ['one', 'two', 'three']; function printwords() { for (var i = 0, len = text.length; i < len; i++) { var dataSpan = document.createElement('span'); dataSpan.setAttribute("id", i + "id"); dataSpan.style.background = 'rgba(255, 0, 0, 0.5)'; dataSpan.innerHTML = text[i] + ' '; document.getElementById('editor').appendChild(dataSpan); }; }; printwords(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div contenteditable id="editor"> </div>