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

	
		—请选择—
		北京市
		天津市
		河北省
	
	
	
  

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=`—请选择—`;
      //遍历对象数组,添加相关值
      //多出的防错选,使得对象数组下标与被选相差一
      for(let key of cities[index-1]){
        select_city.innerHTML+=`${key.name}`;
      }
      //清除城市选项卡隐藏类型
      select_city.className="";
    }else{
      //省份选项卡处于防错选选项时,隐藏城市选项卡
      select_city.className="hide";
    }
  }

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

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

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

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

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