js dom树操作，在下拉框中添加删除html元素-CFANZ编程社区

简介

js dom树操作，在下拉框中添加删除html元素

正文

function addCity(){
  //创建一个html元素
  var option_obj = document.createElement("option");
  //给html对象设置属性
  option_obj.value = 1;
  option_obj.innerHTML="上海";
  //找到select对象
  var select_obj = document.getElementById("city");
  //将option对象添加到select中
  select_obj.appendChild(option_obj);
}

function removeCity(){
  //1.找到select对象
  var select_obj = document.getElementById("city");
  //2.找到第一个option对象
  select_obj.removeChild(select_obj.options[0]);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script  type="text/javascript" src="js/index5.js"></script>
  </head>
  <body>
    <input type="button" value="添加" onclick="addCity()"/>
    <input type="button" value="移除" onclick="removeCity()"/>
    <select id="city">
      <option value="0">请选择</option>
    </select>
  </body>
</html>

效果图

js dom树操作，在下拉框中添加删除html元素_ci