Question

我通过按钮动态插入新的html文本输入，但是当我创建它们并分配ID时，它会将ID分配给H4文本和标签，但不是实际的输入元素。我正在使用Jquery来创建元素..

            $("<h4><span style=\"color: #006085\">Target " + counter + ":</span> Enter Name :</h4><label><span>Name :</span><input type='text' value='' /></label>")
         .attr("id", "targetname" + counter)
         .insertBefore("#elementtarget");

        $("<h4><span style=\"color: #006085\">Target " + counter + ":</span> Enter Return :</h4><label><span>Return :</span><input type='text' value='' /></label>")
         .attr("id", "targetreturn" + counter)
         .insertBefore("#elementtarget");

我知道输入在技术上是一个孩子，但如果我尝试设置孩子的属性，H4文本就会消失。

Answer 1

我知道输入在技术上是个孩子......

没什么＆＃34;技术＆＃34;关于它，它是一个孩子。不过，您仍然可以设置id：

$("<h4><span style=\"color: #006085\">Target " + counter + ":</span> Enter Name :</h4><label><span>Name :</span><input type='text' value='' /></label>")
.find("input").attr("id", "targetname" + counter).end()
.insertBefore("#elementtarget");

（同样适用于下一个块。）在创建结构后，我使用.find("input")查找其中的input，然后分配id，然后使用{{ 1}}所以我们回到原来的jQuery对象（end及其后代），这样我们可以使用h4。

或者，您可以在插入结构后添加insertBefore：

id

...这意味着您不再需要$("<h4><span style=\"color: #006085\">Target " + counter + ":</span> Enter Name :</h4><label><span>Name :</span><input type='text' value='' /></label>") .insertBefore("#elementtarget") .find("input").attr("id", "targetname" + counter);。

Answer 2

那是因为你的链接顺序。如果在将属性附加到DOM之前找到并添加属性，则最终只会添加输入（因为查找）。

只需附加元素然后更改您的ID：

$("<h4><span style=\"color: #006085\">Target " + counter + ":</span> Enter Return :</h4><label><span>Return :</span><input type='text' value='' /></label>")
.insertBefore("#elementtarget")
.find('input')
.attr("id", "targetreturn" + counter);

Answer 3

如何在html字符串上设置id？

    $("<h4><span style=\"color: #006085\">Target " + counter + ":</span> Enter Return :</h4><label><span>Return :</span><input type='text' value='' id='targetreturn" + counter + "'/></label>")
     .insertBefore("#elementtarget");

JsFiddle demo

PS：记得在提交之前解析输入字段;否则你不会得到你的数据......或者也可以设置＆＃34; name＆＃34;在输入字段：p

将id属性添加到html输入

3 个答案: