不确定如何设计使用XML创建HTML对象的JavaScript/jQuery功能

XML文档中的主“C”节点都有一个type属性,根据我要运行的类型,函数将使用分配给特定“C”节点的其他属性创建一个新的html对象。

目前,我有一个 for 循环,从XML中提取每个“C”节点及其属性(例如,宽度、高度、x、y)。

也在里面 对于 if 语句,该语句检查正在处理的当前“C”节点的“type”属性,并根据类型运行不同的函数,该函数随后将使用从XML中提取的属性创建一个新的HTML对象。

问题是同一类型的“C”节点可能不止一个,因此,例如,当我创建的函数在检测到“type=1”的“C”节点时将运行时,我不能使用 var p = document.createElement('p') '因为如果循环中稍后出现相同类型的'C'节点,它将冲突并用刚刚创建的变量覆盖该元素。

我真的不知道该怎么做?

这是我的全部剧本。如果您需要我详细说明任何部分,请询问,我相信这不是用最好的方式写的:

    var arrayIds = new Array();
$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "question.xml",
    dataType: "xml",
    success: function(xml)
    {
                  $(xml).find("C").each(function(){
                        arrayIds.push($(this).attr('ID'));
                  });


                  var svgTag = document.createElement('SVG');
                  // Create question type objects
                  function ctyp3(x,y,width,height,baC)
                  {
                      alert('test');
                      var r = document.createElement('rect');
                      r.x = x;
                      r.y = y;
                      r.width = width;
                      r.height = height;
                      r.fillcolor = baC;
                      svgTag.appendChild(r);
                  }

                  // Extract question data from XML
                  var questions = [];
                  for (j=0; j<arrayIds.length; j++)
                  { 
                    $(xml).find("C[ID='" + arrayIds[j] + "']").each(function(){
                        // pass values
                        questions[j] = {
                            typ: $(this).attr('typ'),
                            width: $(this).find("I").attr('wid'),
                            height: $(this).find("I").attr('hei'),
                            x: $(this).find("I").attr('x'),
                            y: $(this).find("I").attr('x'),
                            baC: $(this).find("I").attr('baC'),
                            boC: $(this).find("I").attr('boC'),
                            boW: $(this).find("I").attr('boW')
                        }

                        alert($(this).attr('typ'));

                        if ($(this).attr('typ') == '3')
                        {
                            ctyp3(x,y,width,height,baC);
                            // alert('pass');
                        } else {
                            // Add here
                            // alert('fail');
                        }
                    });
                  }
    }
  });
});