Question

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

在我的函数中，我让appendchild为span标记工作。在代码的底部，我有一个for循环，我写了附加一个ul / li并且该名称有效。但我无法使用相同的功能来处理span标记。

我如何追加孩子以及每次我追加孩子时输入获得新的身份名称？

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

            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>元素（您可以记住列表项）。因此，虽然有些浏览器可能会原谅你向<ul>标记添加跨度，但这并不是一种好习惯。从技术上讲是violation of the standard

2）您的循环只会运行一次。您将看到它从变量i开始，初始化为0，并且只会在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添加新名称

1 个答案: