Javascript JS将子元素附加到类的每个元素 函数makeCategory（）{ getList=document.getElementById（“列表”）； cat=document.createElement（“div”）； cat.setAttribute（“类”、“类”）； getList.appendChild（cat）； cat.innerHTML= “-+类别”； } 功能移除（z）{ document.getElementById（“列表”）.removeChild（z.parentNode）； } 功能子类别（i）{ y=document.createElement（“输入”）； x=document.getElementsByClassName（“cat”）； x[i].追加子项（y）； }

我不知道如何使用“onclick”在类的每个元素上追加子元素。它不适用于“for循环”-它总是附加到最新的div。它只在我指定类元素的数量时起作用。

Demo Outline

• 将HTML标记重新加工成真实的描述列表或

• 我们将通过单击事件驱动函数，而不是尝试递归地操作多个元素
• 使用的代码为我们节省了大量额外的代码。无限数量的
  和
  只需要一个

  eventListener（）

• 被用来代替字符串文字
• 在

  add（）

  函数中扮演重要角色

详细信息将在演示中进行注释

演示

//参考描述列表dl#列表
var dock=document.getElementById（“列表”）；
/*回调函数
||如果单击的按钮不是dl#列表。。。
||-tgt/e.target是单击的
||-如果tgt有.add，则调用add（）。。。
||否则，如果tgt有。rem。。。
||cat是它的父项（.cat）
||-获取div.cat父对象并删除.cat
*/
功能模块（e，船坞）{
如果（e.target！==e.currentTarget）{
var tgt=e.target；
如果（tgt.className=='add'）{
添加.调用（此，dock）；
}else if（tgt.className=='rem'）{
var cat=tgt.parentNode；
cat.parentNode.removeChild（cat）；
}否则返回；
}
}
/*注册所有.cat的祖先
||和s。（dl#列表）。
||通过这样做，就不需要添加ventListeners
||每
*/
dock.addEventListener（'click'，函数（e）{
mod（e，this）；
}，假）；
/*此函数表达式接受一个字符串（在此
||大小写字符串是模板文本。）和
||将其解析为HTML，因为它在
||由第一个参数确定的位置：
||“之前”
||（与append完全相同）
*/
var add=功能（驳接）{
var cat=`
-
+
`;
dock.insertAdjacentHTML（'beforeend'，cat）；
};
#列表{
利润率：20px；
边框：2件脊金；
背景：rgba（0,0,0,3）；
填充：5px10px15px；
}
dt{
字体：700 20px/1控制台；
颜色：金色；
背景：rgba（0,0,0,5）；
填充物：5px；
}
dd{
字体大小：16px；
颜色：#fff；
背景：rgba（0,0,0,5）；
填充物：5px；
保证金：8px 4px 8px 0；
}
输入，
钮扣{
宽度：10%；
字体：继承；
显示：内联块；
}
输入[type='text']{
宽度：76%；
}

类别列表
+
您能否使用
控制台
检查每次调用中
makeSubCategory（i）
中
i
的值。
function makeCategory() {
    getList = document.getElementById("list");
    cat = document.createElement("div");
    cat.setAttribute("class", "cat");
    getList.appendChild(cat);
    cat.innerHTML =
        '<input type="text" name="name"/><span class="removeButton" onclick= "remove(this)">-</span><br><span class="makeSubCat" onclick="makeSubCategory(this)">+Category</span>';
}

function remove(z) {
    document.getElementById("list").removeChild(z.parentNode);
}

function makeSubCategory(i) {
    y = document.createElement("input");
    x = document.getElementsByClassName("cat");
    x[i].appendChild(y);
}