出现错误:使用javascript引用数组的索引

我想同时对两个svg矩形、两个文本进行排序和移动。

所以我为svg-rects创建了两个数组，文本：

var numbers = [24, 19, 38, 41, 55, 67];
var rects = [];
var texts = [];
function createRect() {
  for(var i=0; i<6; i++) {
  var rect = document.createElementNS(NS, 'rect'); 
  rect.setAttributeNS(null, 'id', "srect"+i); 
  rect.setAttributeNS(null, 'fill', '#5CD1E5');
  rect.setAttributeNS(null, 'x', x); 
  rect.setAttributeNS(null, 'y', y);
  rect.setAttributeNS(null, 'height', '80');
  rect.setAttributeNS(null, 'width', '80');
  rect.setAttributeNS(null, 'stroke', 'white');
  document.getElementById('svgOne').appendChild(rect);
  }
}
function createText() {
  //create 6 svg texts
  //same way 
}
function sortActionRect() {
  var counter = 0;
  var swapped = false;
  do {
    for (var k = 0; k < numbers.length - 1; k++) {
      for (var j = 0; j < numbers.length - 1; j++) {
        //to emphasize for selected two svg rects 
        $('#' + rects[j].id).attr('fill', '#0054FF');
        $('#' + rects[j + 1].id).attr('fill', '#FFA7A7');
        setTimeout(function() {
          document.getElementById('svgOne').appendChild(rects[j]);
          document.getElementById('svgOne').appendChild(rects[j + 1]);
          document.getElementById('svgOne').appendChild(texts[j]);
          document.getElementById('svgOne').appendChild(texts[j + 1]);
        }, 2000);
        //move up to svg rect, text
        $('#' + rects[j].id).attr('y', '50px');
        $('#' + rects[j + 1].id).attr('y', '50px');
        $('#' + texts[j].id).attr('y', '100px');
        $('#' + texts[j + 1].id).attr('y', '100px');
        setTimeout(function() {
          document.getElementById('svgOne').appendChild(rects[j]);
          document.getElementById('svgOne').appendChild(rects[j + 1]);
          document.getElementById('svgOne').appendChild(texts[j]);
          document.getElementById('svgOne').appendChild(texts[j + 1]);
        }, 2100);
        if (Number(numbers[j]) > Number(numbers[j + 1])) { //sort
          var temp = numbers[j];
          numbers[j] = numbers[j + 1];
          numbers[j + 1] = temp;
          var d1 = texts[j].childNodes[0];
          var d2 = texts[j + 1].childNodes[0];
          d1.nodeValue = numbers[j];
          d2.nodeValue = numbers[j + 1];
          setTimeout(function() {
            $('#' + rects[j].id).attr('fill', '#FFA7A7');
            $('#' + rects[j + 1].id).attr('fill', '#0054FF');
            document.getElementById('svgOne').appendChild(rects[j]);
            document.getElementById('svgOne').appendChild(rects[j + 1]);
            document.getElementById('svgOne').appendChild(texts[j]);
            document.getElementById('svgOne').appendChild(texts[j + 1]);
          }, 3000);
          //move down svgs
          setTimeout(function() {
            $('#' + rects[j].id).attr('fill', '#5CD1E5');
            $('#' + rects[j + 1].id).attr('fill', '#5CD1E5');
            document.getElementById('svgOne').appendChild(rects[j]);
            document.getElementById('svgOne').appendChild(rects[j + 1]);
          }, 3100);
          setTimeout(function() {
            $('#' + texts[j].id).attr('y', '250px');
            $('#' + texts[j + 1].id).attr('y', '250px');
            document.getElementById('svgOne').appendChild(texts[j]);
            document.getElementById('svgOne').appendChild(texts[j + 1]);
          }, 2200);
        } //if
        else {
          //move down svgs 
          setTimeout(function() {
            $('#' + rects[j].id).attr('fill', '#5CD1E5');
            $('#' + rects[j + 1].id).attr('fill', '#5CD1E5');
            document.getElementById('svgOne').appendChild(rects[j]);
            document.getElementById('svgOne').appendChild(rects[j + 1]);
          }, 3200);
          setTimeout(function() {
            $('#' + texts[j].id).attr('y', '250px');
            $('#' + texts[j + 1].id).attr('y', '250px');
            document.getElementById('svgOne').appendChild(texts[j]);
            document.getElementById('svgOne').appendChild(texts[j + 1]);
          }, 2300);
        } //else  
      } //for
      counter++;
      if (counter == 5) {
        swapped = true;
      }
    } //for 
  } while (swapped == false);
}

我使用了console.log()，但出现了2个错误。

一种是：

未捕获的类型错误：无法在"Node"上执行"appendChild"：参数1的类型不是"Node"

另一个是：

未捕获的类型错误：无法读取未定义的属性"id"

这两个错误大多发生在使用CCD_ 2时。

我怎样才能使这种方法行之有效？