在更改標籤內元素前輸出該標籤，顯示的卻是更改後的標籤

使用<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