innerHTML和innerText（选择水果案例）

 

innerHTML 获取内容的时候，如果内容中有标签，会把标签页获取到

innerText 获取内容的时候，如果内容中有标签，会把标签过滤掉 ，前后的换行和空白都会去掉

 

想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

box.innerHTML = '<b>我是</b>程序猿';
box.innerText = '<b>我是</b>程序猿';
//打印出来分别是
我是程序猿   // 我是  这两个字会加粗显示
<b>我是</b>程序猿

//  multiple="multiple"  multiple 属性规定输入字段可选择多个值
//如果使用该属性，则字段可接受多个值。
<select id="all" multiple="multiple">

 

// 封装了获取元素的方法，类似jquery,使用 my$(选择器) 可以获取元素
<script>
var all = my$('all');
var select = my$('select');

all.children[0].onclick = function () {
  alert('hello');
}

// 1 全部选择
my$('btn1').onclick = function () {
  // 先获取子元素的个数，将来再发生变化不会受影响
  // 现在len的值始终是当前获取到的all.children.length 当前个数5
  // var len = all.children.length;
  // for (var i = 0; i < len; i++) {
  //   var option = all.children[0];
  //   select.appendChild(option);
  // }
  // 
  // 使用这种方式移动子元素的话，如果子元素有事件，移动之后元素的事件丢失
  select.innerHTML = all.innerHTML;
  // 当我们是用innerHTML 清空子元素的时候
  // 如果子元素有事件，此时会发生内存泄漏
  all.innerHTML = '';  // 清空标签之间的内容
}

// 3 移动选中的水果
my$('btn3').onclick = function () {
  // 找到所有选中的option
  var array = []; // 存储选中的option
  for (var i = 0; i < all.children.length; i++) {
    var option = all.children[i];
    if (option.selected) {
      array.push(option);
      // 去掉当前option的选中效果
      option.selected = false;
    }
  }

  // 把数组中的option移动到第二个select中
  for (var i = 0; i < array.length; i++) {
    var option = array[i];
    select.appendChild(option);
  }
}
</script>