如何附加一个span标记并为每个id指定一个新名称

How to append a span tag and give each id a new name

本文关键字：一个 id 新名 span 何附加      更新时间：2023-09-26

我有3个输入位于span标记中（我使用的是span，而不是li，因为我的代码中有很多li）。我有一个javascript函数，它会附加每个span标记（包括3个输入）。我需要每个输入都有一个特定的id名称。不知道如何做到这一点，我现在正在学习javascript，所以原谅我，因为我是个傻瓜。

在我的函数中，我让appendchild为span标记工作。在代码的底部，我有一个for循环，我写了这个循环来附加一个ul/li，这个名字很管用。但是，我无法将同样的功能用于span标记。

如何追加child，并且每次追加child时，输入都会获得一个新的id名称？

这是我到目前为止的代码：

            function budgetList(){
            var elmnt = document.getElementsByTagName("SPAN")[0];
            var cln = elmnt.cloneNode(true);
            var budgetListing = document.getElementById("budget-listing");
            var append = budgetListing.appendChild(cln);
            var expenseName = document.getElementById('expenseName');
            var expectedExpense = document.getElementById('expectedExpense');
            var actualExpense = document.getElementById('actualExpense');

            var ul = document.createElement("ul");
            document.body.appendChild(li);
            for(var i = 0; i <= 0; i++){
                var li = document.createElement("li");
                li.className = "budget-list" + i;
                var a = document.createElement("a");
                a.innerHTML = "<input type='text'>";
                // a.innerHTML = "Subfile " + i;
                var att = document.createAttribute("class");
                att.value = "budgeting" + i;

                li.appendChild(a);
                ul.appendChild(li);
            }
        }

这是html

        <button onclick="budgetList()">Add New Row</button>
        <input type="button" value="save" onclick="save()" />
        <ul id="budget-listing">
            <span>
                <input type="text" id="expenseName">
                <input type="text" id="expectedExpense">
                <input type="text" id="actualExpense">
            </span>        
        </ul>

一些事情。。。

1）<ul>代表无序列表，<ul>元素希望其子元素是<li>元素（您可以将其记为列表项）。因此，虽然有些浏览器可能会容忍您在<ul>标记中添加跨度，但这并不是一种好的做法。从技术上讲，这违反了标准

2）您的循环将只运行一次。您将看到它从初始化为0的变量i开始，并且只运行i<=0，这只在第一次迭代时为真，因为之后您递增（i++），这意味着通过i的第二次将等于1，1不小于或等于0。因此，在这种情况下根本不需要使用循环。

3）您的代码与您的请求和页面上下文所建议的内容有点脱节。在我看来，当用户点击按钮时，你想用3个输入来复制跨度。如果确实如此，那么我提供以下解决方案。。。

function budgetList(){
        // You get the span that will serve as a template, good
        var elmnt = document.getElementsByTagName("SPAN")[0];
        // you clone it, good
        var cln = elmnt.cloneNode(true);
        //next we want to modify the IDs of the child spans.
        // A good way to do this is to use a unique number that will change with every step
        // There a few ways to get a unique number each time
        // I propose taking the number of span groups
        var budgetListing = document.getElementById("budget-listing");
        var uniqueNumber = budgetListing.childNodes.length;
        // Now we update all the ids using the unique number
        cln.getElementsByTagName('INPUT')[0].setAttribute('id', "expenseName_"+uniqueNumber);
        cln.getElementsByTagName('INPUT')[1].setAttribute('id', "expectedExpense_"+uniqueNumber);
        cln.getElementsByTagName('INPUT')[2].setAttribute('id', "actualExpense_"+uniqueNumber);
        // and write our new span group into the container
        budgetListing.appendChild(cln);
}

如果我做了任何错误的假设，或者这是否接近你的要求，请告诉我。JavaScript及其与HTML的交互一开始可能会令人困惑，但要坚持下去！

编辑：没有意识到getElementById不是一个函数。。。替换为getElementsByTagName

相关文章：