在更改标签内元素前输出该标签，显示的却是更改后的标签

在更改标签内元素前输出该标签，显示的却是更改后的标签

使用<select>标签做一个下拉选项条，当选中了某一个选项后，选项条中的选项发生改变。在该<select>标签中的选项发现改变前后使用console.log()输出该标签，显示的确都是改变后的标签。

代码如下：

<script type="text/javascript">
    function fun() {
        var t = document.getElementById("test");
        console.log(t);
        t.innerHTML = "";
        console.log(t);
        t.innerHTML = "<option>改变了</option>";
        console.log(t);
	}
</script>

<select id="test" onchange="fun()">
    <option value ="">这是一个选项1</option>
    <option value ="">这是一个选项2</option>
</select>

输出结果：

---

原因：console.log(t)输出的t是一个引用值，所以显示都是更改后的最终结果。改为console.log(t.innerHTML)输出的才是其中的内容。

改为：

<script type="text/javascript">
    function fun() {
        var t = document.getElementById("test");
        console.log(t.innerHTML);
        t.innerHTML = "";
        console.log(t.innerHTML);
        t.innerHTML = "<option>改变了</option>";
        console.log(t.innerHTML);
    }
</script>

---

likeqc
ends