对已存在的标签元素添加子元素

最新推荐文章于 2024-04-09 23:01:20 发布

黑芝麻饺子

最新推荐文章于 2024-04-09 23:01:20 发布

阅读量3.1k

点赞数

分类专栏： JS dom 文章标签：添加子元素 js dom

本文链接：https://blog.csdn.net/weixin_41108537/article/details/90024660

版权

JS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

dom

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<title>二级联动列表</title>
<meta charset="utf-8" />
<style>
	.hide{ display: none; }
</style>


</head>
<body>
	<select name="provs">
		<option>—请选择—</option><!--0-->
		<option>北京市</option><!--1-->
		<option>天津市</option>
		<option>河北省</option>
	</select>
	<select name="cities" class="hide">
	</select>
  <script>
	//实现“省”和“城市”的级联下拉列表
	var cities=[
      [{"name":'东城区',"value":101},
       {"name":'西城区',"value":102},
       {"name":'海淀区',"value":103},
       {"name":'朝阳区',"value":104}],
      [{"name":'河东区',"value":201},
       {"name":'河西区',"value":202},
       {"name":'南开区',"value":203}],
      [{"name":'石家庄市',"value":301},
       {"name":'廊坊市',"value":302},
       {"name":'保定市',"value":303},
       {"name":'唐山市',"value":304},
       {"name":'秦皇岛市',"value":305}]
	];
//下补
</script>
</body>
</html>

1.替换原有元素

使用document.createElement(“标签名”);
创建与父标签同类型的标签
使用元素.appendChild(元素名),为替换的元素增加子元素

使用父元素.parentNode.replaceChilde(替换的元素,父元素)


  //获取省份元素对象
  let select_provs=document.querySelector("select[name=provs]");
  //监听省份元素改变
  select_provs.onchange=function(event){
  //获取城市元素对象
  let select_city=document.querySelector("select[name=cities]");
    let select_provs=this;
    //获取当前被选元素的下标
    let index=parseInt(select_provs.selectedIndex);
    //判断是否选择了有意义的值
    if(index>0){
      //创建替换节点
      let parent=document.createElement("select");
      parent.name="cities";
      //添加防错选
      parent.appendChild(new Option("—请选择—"));
      //遍历对象数组,添加相关值
      //多出的防错选,使得对象数组下标与被选相差一
      for(let key of cities[index-1]){
      //添加子元素
        parent.appendChild(new Option(key.name,key.value));
      }
      //替换原来的城市选项卡
      select_city.parentNode.replaceChild(parent,select_city);
    }else{
      //省份选项卡处于防错选选项时,隐藏城市选项卡
      select_city.className="hide";
    }
  }

2.使用文档片段

使用document.createDocumentFragment();
子元素步骤同上
直接父元素.appendChild(文档片段);
就可以直接添加子元素


  //获取省份元素对象
  let select_provs=document.querySelector("select[name=provs]");
  //监听省份元素改变
  select_provs.onchange=function(event){
  //获取城市元素对象
  let select_city=document.querySelector("select[name=cities]");
    let select_provs=this;
    //获取当前被选元素的下标
    let index=parseInt(select_provs.selectedIndex);
    //判断是否选择了有意义的值
    if(index>0){
      //添加防错选
       parent.appendChild(new Option("—请选择—"));
      //遍历对象数组,添加相关值
      //多出的防错选,使得对象数组下标与被选相差一
      for(let key of cities[index-1]){
        //添加子元素
        parent.appendChild(new Option(key.name,key.value));
      }
      //清除原有子元素
      select_city.innerHTML="";
      //增加文档片段
      select_city.appendChild(parent);
      //清除城市选项卡隐藏类型
      select_city.className="";
    }else{
      //省份选项卡处于防错选选项时,隐藏城市选项卡
      select_city.className="hide";
    }
  }

3.使用innerHTML

先把子元素使用模板字符串拼接
然后使用父元素.innerHTML=模板字符串;
就可以为父元素添加子元素


  //获取省份元素对象
  let select_provs=document.querySelector("select[name=provs]");
  //监听省份元素改变
  select_provs.onchange=function(event){
  //获取城市元素对象
  let select_city=document.querySelector("select[name=cities]");
    let select_provs=this;
    //获取当前被选元素的下标
    let index=parseInt(select_provs.selectedIndex);
    //判断是否选择了有意义的值
    if(index>0){
      //添加防错选,重置父元素内容
      select_city.innerHTML=`<option>—请选择—</option>`;
      //遍历对象数组,添加相关值
      //多出的防错选,使得对象数组下标与被选相差一
      for(let key of cities[index-1]){
        select_city.innerHTML+=`<option value=${key.value}>${key.name}</option>`;
      }
      //清除城市选项卡隐藏类型
      select_city.className="";
    }else{
      //省份选项卡处于防错选选项时,隐藏城市选项卡
      select_city.className="hide";
    }
  }

1.优点
当要重置父元素所有属性和innerHTML时,较为方便
1.缺点
每一次动态都需要捕获一次父元素
子元素的每一个属性的增加都需要一个语句;

试用于增加子元素之后,父元素属性和innerHTML重置的标签

2.优点
不需要多次捕获父元素
2.缺点
子元素的每一个属性的增加都需要一个语句;

适用于增加子元素之后,父元素不需要重置的标签

3.优点
模板字符串直接拼接,子元素属性直接书写即可.
可现在页面上实现效果,然后复制进入模板中,试用${}动态生成数据
需要重置时使用=
不需要时使用+=

黑芝麻饺子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
对已存在的标签元素添加子元素

1.替换原有元素使用document.createElement(“标签名”);创建与父标签同类型的标签使用元素.appendChild(元素名),为替换的元素增加子元素使用父元素.parentNode.replaceChilde(替换的元素,父元素)2.使用文档片段使用document.createDocumentFragment();子元素步骤同上直接父元素.appendChi...
复制链接

扫一扫