Javascript jQuery-如何用标签包装输入标记

我想用label和li标记包装输入标记

<li><label><input type="checkbox" value="1">Apple</label></li>
<li><label><input type="checkbox" value="2">Banana</label></li>
<li><label><input type="checkbox" value="3">Orange</label></li>

然而，输出如下

<li><label><input type="checkbox" value="1">Apple</input></label></li>
<li><label><input type="checkbox" value="2">Banana</input></label></li>
<li><label><input type="checkbox" value="3">Orange</input></label></li>

我搬不动

我的代码：

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； 食品中的氟{ var tag_输入=$； tag_li=$ 标签=$； tag_input.valfoods[f]['id']； tag_input.textfoods[f]['name']； var tag=tag_li.appendtag_label.appendtag_输入 console.logtag[0].outerHTML； }

---

一个选项是构造HTML字符串，如：

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； var html=； 食品{ html+=+o.name+； };

---

console.loghtml 一个选项是构造HTML字符串，如：

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； var html=； 食品{ html+=+o.name+； }; console.loghtml 您正在设置tag_输入变量的文本，而不是tag_标签

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； 食品中的氟{ var tag_输入=$； tag_li=$ 标签=$； tag_input.valfoods[f]['id']； tag_label.appendtag_输入； 标签。附加食品[f][‘名称’]； var tag=标签(li.appendtag)标签;； console.logtag[0].outerHTML； } 您正在设置tag_输入变量的文本，而不是tag_标签

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； 食品中的氟{ var tag_输入=$； tag_li=$ 标签=$； tag_input.valfoods[f]['id']； tag_label.appendtag_输入； 标签。附加食品[f][‘名称’]； var tag=标签(li.appendtag)标签;； console.logtag[0].outerHTML； }

---

您可以将文本添加到标签而不是输入，并在输入前添加：

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； 食品中的氟{ var tag_输入=$； tag_li=$ 标签=$； tag_input.valfoods[f]['id']； 标签.textfoods[f]['name']； var tag=tag\u li.appendtag\u label.prependtag\u输入 console.logtag[0].outerHTML； }

---

您可以将文本添加到标签而不是输入，并在输入前添加：

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； 食品中的氟{ var tag_输入=$； tag_li=$ 标签=$； tag_input.valfoods[f]['id']； 标签.textfoods[f]['name']； var tag=tag\u li.appendtag\u label.prependtag\u输入 console.logtag[0].outerHTML； }

---

您正试图将name属性作为输入文本而不是标签文本，因此它正在为输入添加结束标记。 您可以使用字符串来创建html元素，而不是创建新元素，请参见下面的代码

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； 食品中的氟{ var tag=+食品[f]['name']+； var$tag=$tag； log$tag.html； }

---

您正试图将name属性作为输入文本而不是标签文本，因此它正在为输入添加结束标记。 您可以使用字符串来创建html元素，而不是创建新元素，请参见下面的代码

var foods=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； 食品中的氟{ var tag=+食品[f]['name']+； var$tag=$tag； log$tag.html； }

---

您可以通过一行利用模板字符串和方法的简单代码来实现目标：

const src=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； const res=src.reducehtml，item=>html+=`${item.name}`； console.logres；

---

.作为控制台包装器{min height:100%}您可以通过一行简单的代码实现您的目标，该代码利用了模板字符串和方法：

const src=[{id:1，名称：'Apple'}，{id:2，名称：'Banana'}，{id:3，名称：'Orange'}]； const res=src.reducehtml，item=>html+=`${item.name}`； console.logres；

---

。对于那些可能需要有效的解决方案并且只需要一行代码而不是十行代码的人，我建议看一下下面的答案。对于那些可能需要有效的解决方案并且只需要一行代码而不是十行代码的人，我建议看一下下面的答案。