使用JQuery在Javascript中处理我的XML阅读器函数中的重叠div

我正在尝试用Javascript制作某种XML读取器。该程序的目标是以某种动态的方式从xml文件创建一个表单，从技术上来说，它应该可以处理任何类型的表单

这就是我的XMLreader函数的外观：

'use strict'

$(document).ready(function()
{

    $.ajax( 
    {
        type: "GET",
        url: ".\\test.xml",
        //async: false,
        dataType: "xml",
        success: function(xml)
        {
            let idDiv = 0;  
            let idRadio = 0;

            $.parseXML(xml);
            $(xml).find('div').each(function()
            {
                const formDiv = document.createElement("div");
                formDiv.className = $(this).attr('name');
                setBorder(formDiv, $(this).find('border').attr('color'), $(this).find('border').attr('style'), $(this).find('border').attr('width'));
                formDiv.id = setID($(this),[idDiv]);
                console.log(formDiv.id);
                setCoordinates(formDiv, $(this).attr("top"), $(this).attr("left"), $(this).attr('width'), $(this).attr('height'));
                formDiv.style.position = "absolute";
                $(this).find('radio').each(function()
                {
                    $(this).find('elem').each(function()
                    {
                        const radioAndLabel = document.createElement("div");
                        const rad = document.createElement('input');
                        const lab = document.createElement("label");
                        rad.setAttribute("type", "radio");
                        rad.setAttribute("value", $(this).text());
                        rad.setAttribute("name", "lewis");
                        rad.id = setID($(this),[idDiv, idRadio]);
                        console.log(rad.id);
                        lab.setAttribute("for", $(this).text());
                        lab.innerHTML = $(this).text();
                        setCoordinates(radioAndLabel, $(this).attr('top'), $(this).attr('left'));
                        radioAndLabel.appendChild(rad);
                        radioAndLabel.appendChild(lab);
                        formDiv.appendChild(radioAndLabel);
                        idRadio++;
                    });
                });
                formDiv.appendChild(document.createElement("br"));
                document.body.appendChild(formDiv);
                idDiv++;
                idRadio = 0;

            });
        }
    });
});

function setCoordinates(elem, top, left, width, height)
{   
    elem.style.position = "relative";
    if (top !== undefined) 
    {                   
        elem.style.top = top;
    }
    if (left !== undefined) 
    {
        elem.style.left = left;
    }
    if (width !== undefined) 
    {                   
         elem.style.width = width;
    }
    if (height !== undefined) 
    {
         elem.style.height = height;
    }
}

function setID(elem, values)
{
    let IDstring = elem.attr("id");
    for (let i=0; i<values.length; i++)
    {
        IDstring += values[i].toString() + "_";
    }
    IDstring = IDstring.substring(0, IDstring.length - 1);
    return IDstring
}

function setBorder(elem, color, style, width)
{
        elem.style.border = color + " " + style + " " + width;
}

“严格使用”
$（文档）.ready（函数（）
{
$.ajax（
{
键入：“获取”，
url:“.\\test.xml”，
//async:false，
数据类型：“xml”，
成功：函数（xml）
{
设idDiv=0；
设idRadio=0；
$.parseXML（xml）；
$（xml）.find（'div'）.each（function（）
{
const formDiv=document.createElement（“div”）；
formDiv.className=$（this.attr（'name'）；
setboorder（formDiv，$（this）.find（'border'）.attr（'color'），$（this.find（'border'））.attr（'style'），$（this.find（'border'）.attr（'width'））；
formDiv.id=setID（$（this），[idDiv]）；
console.log（formDiv.id）；
setCoordinates（formDiv，$（this）.attr（“top”），$（this.attr（“left”），$（this.attr（“width”），$（this.attr（“height”）；
formDiv.style.position=“绝对”；
$（this）.find（'radio'）.each（function（）
{
$（this）.find（'elem'）.each（function（）
{
const radioAndLabel=document.createElement（“div”）；
const rad=document.createElement（'input'）；
const lab=document.createElement（“标签”）；
rad.setAttribute（“类型”、“无线电”）；
rad.setAttribute（“value”，$（this.text（））；
rad.setAttribute（“名称”、“刘易斯”）；
rad.id=setID（$（这个），[idDiv，idRadio]）；
控制台日志（rad.id）；
lab.setAttribute（“for”，$（this.text（））；
lab.innerHTML=$（this.text（）；
setCoordinates（radioAndLabel，$（this.attr（'top'），$（this.attr（'left'））；
radioAndLabel.appendChild（rad）；
radioAndLabel.appendChild（实验室）；
formDiv.appendChild（radioAndLabel）；
idRadio++；
});
});
formDiv.appendChild（document.createElement（“br”））；
文件.body.appendChild（formDiv）；
idDiv++；
idRadio=0；
});
}
});
});
功能设置坐标（元素、顶部、左侧、宽度、高度）
{   
elem.style.position=“相对”；
如果（顶部！==未定义）
{                   
elem.style.top=top；
}
如果（左！==未定义）
{
elem.style.left=左；
}
如果（宽度！==未定义）
{                   
elem.style.width=宽度；
}
如果（高度！==未定义）
{
elem.style.height=高度；
}
}
函数集合ID（元素、值）
{
设IDstring=elem.attr（“id”）；
对于（设i=0；i什么是叠瓦div？这是否意味着重叠的可能性？@AndyG特别以屋顶瓦的形式重叠。它们看起来只是重叠。这可能是因为
id
s必须是唯一的，但您的内部div与外部div具有相同的id:
id=“div\ux”
.TBH，很难判断你在做什么，在哪里以及你想实现/不实现什么。你提供的HTML是XML源代码吗？它是最终呈现的HTML吗？你能设置一个可以在操作中看到的HTML吗？@freedomn-m“HTML”ID实际上是由javascript代码完成的，所以虽然它们在XML中写的是相同的，但JS文件实际上负责为每个元素提供一个唯一的ID（除了我可能忘记的元素）。你所说的最终呈现HTML是什么意思？我将尝试设置一个示例。@AndyG是的。我的错。什么是叠瓦div？它是否意味着重叠的可能性？@AndyG特别以屋顶瓦的形式重叠。它们看起来只是重叠。这可能是因为
id
s必须是唯一的，但您的内部div与o具有相同的id吗首先：
id=“div\u”
.TBH，很难判断你在做什么，在哪里以及你想实现/不实现什么。你提供的HTML是XML源代码吗？它是最终呈现的HTML吗？你能设置一个可以看到它的动作吗？@freedomn-m“HTML”是不是XML.ID实际上是由javascript代码完成的，所以虽然它们在XML中写的是相同的，但是JS文件实际上负责为每个元素提供一个唯一的ID（除了我可能忘记的元素）。你说最终呈现的HTML是什么意思？我将尝试设置一个示例。@AndyG是的。我的错。
<form>
    <div id="div_" name="div_" top="150px" left="150px" height="125px" width="310px">
        <border style="solid" width="3px" color="red"></border>
        <radio>
            <elem id="radio_">cercle</elem>
            <elem id="radio_" top="-20px" left="100px">carré</elem>
            <elem id="radio_" top="-20px">triangle</elem>
            <elem id="radio_" top="-40px" left="100px">rectangle</elem>
        </radio>
    </div>
    <div id="div_" name="div_" width="180px" height="45px">
    <border style="solid" width="3px" color="green"></border>
        <radio>
            <elem id="radio_">AAAA</elem>
            <elem id="radio_" top="-20px" left="100px">BBBB</elem>
            <elem id="radio_" top="-20px">CCCC</elem>
            <elem id="radio_" top="-40px" left="100px">DDDD</elem>
        </radio>
    </div>
</form>

<form>
    <div id="div_" name="div_" top="150px" left="150px" height="125px" width="310px">
        <border style="solid" width="3px" color="red"></border>
        <radio>
            <elem id="radio_">cercle</elem>
            <elem id="radio_" top="-20px" left="100px">carré</elem>
            <elem id="radio_" top="-20px">triangle</elem>
            <elem id="radio_" top="-40px" left="100px">rectangle</elem>
        </radio>
        <div id="div_" name="div_" width="180px" height="45px">
        <border style="solid" width="3px" color="green"></border>
            <radio>
                <elem id="radio_">AAAA</elem>
                <elem id="radio_" top="-20px" left="100px">BBBB</elem>
                <elem id="radio_" top="-20px">CCCC</elem>
                <elem id="radio_" top="-40px" left="100px">DDDD</elem>
            </radio>
        </div>
    </div>
</form>