在js节点中显示颜色

我有一个问题要显示js树中的不同颜色。以下是我尝试过的编码：

 <?php 
    $folderData = mysqli_query($mysql_con,"select f.id, f.name, f.parentid, f.status, f.add_underline,f.file_type, f.jenis_fail from filing_code_management f where f.status = 1 and f.jenis_fail = 1 union all select s.id, s.file_name,s.id_category, s.status, s.add_underline, s.file_type, s.jenis_fail from upload_filing_dms s where s.status = 1 and s.jenis_fail = 1");
   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];

$rrr  = "Testing";
      // echo $siri_pindaan;
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }
      $folders_arr[] = array(
    
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $rrr. ' ' .$row['name'] . ' ' ."<span id='open' style='font-size:9px;'>".$refer_to_code .$row['filing_code_refer']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$link_to_code .$row['filing_code_link']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$row['description_update']."</span>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</span>",
         "category" => $row['category'],
         "filing_code_refer" => $row['filing_code_refer'],
         // "status" => $row['status'], // status 0 is inactive, status 1 is active
         "data" => array("status" => $row['status'],"add_underline"=>$row['add_underline'],"file_type"=>$row['file_type']) ,
         "state" => array("selected" => $selected,"opened"=>$opened) 
     
      );
   }

   ?> 

Java脚本

        .jstree({
          'core': {
            'data': folder_jsondata,
            'multiple': false
          },
          'plugins': ['sort'],
          'sort': function(a, b) {
            return this.get_text(a).localeCompare(this.get_text(b), 'en', {
              numeric: true
            });
          }
        });

        var getColor = function(i) {
          if (i >= 100 && i <= 199) {
            return "blue";
          } else if (i >= 200 && i <= 299) {
            return "red";
          } else if (i >= 300 && i <= 399) {
            return "yellow";
          } else if (i >= 400 && i <= 499) {
            return "purple";
          } else if (i >= 500 && i <= 599) {
            return "green";
          } else {
            return "#000";
          }
        };
        
          var tree = $('#folder_jstree').jstree(true);
          nodelist.forEach(function(n) {
            tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)
            tree.redraw_node(n.id); //Redraw tree
            colorNodes(n.children); //Update leaf nodes
          });
        };

如果我在数字的前面添加了“测试”字样，那么我的输出将无法跟随数字显示颜色。就像图片下方一样：

实际上，我希望输出如下图所示。带颜色的“测试”字样可以显示数字的前面。

这是我正在工作的jsfiddle：https ://jsfiddle.net/jo01vhkw/

希望有人可以指导我如何解决。谢谢。

更新范围

  "text" => "<span>".$rrr."</span>" . ' ' .$row['name'] . ' ' ."<span id='open' style='font-size:9px;'>".$refer_to_code .$row['filing_code_refer']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$link_to_code .$row['filing_code_link']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$row['description_update']."</span>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</span>",
         "category" => $row['category'],