如何附加一个 span 标签并给每个 id 一个新名称

Question

我有 3 个输入位于 span 标签内（我使用的是 span 而不是 li，因为我的代码中有很多 li）。我有一个 javascript 函数，它附加每个 span 标签（包括 3 个输入）。我需要每个输入都有一个特定的 ID 名称。不知道该怎么做，我现在正在学习 javascript 所以请原谅我，因为我是菜鸟。

在我的函数中，我让 appendchild 为 span 标签工作。在代码的底部，我有一个 for 循环，我编写它来附加一个 ul/li 并且该名称有效。但是我无法获得适用于 span 标签的相同功能。

如何追加子项以及每次追加子项时输入都会获得一个新的 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>

Answer 1

一些事情...

1) <ul> 代表无序列表并且 <ul> 元素期望它们的子元素是 <li> 元素（你可以记住项目清单）。因此，虽然某些浏览器可能会允许您将 span 附加到 <ul> 标记，但这并不是一种好的做法。并且在技术上是 violation of the standard

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

如何附加一个 span 标签并给每个 id 一个新名称

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

javascript

for-loop

input

appendchild