< p >今天我們要講的是Javascript Demo程序。< /p >< pre >var addItem = function() { var item = document.getElementById('input').value; var list = document.getElementById('list'); var listItem = document.createElement('li'); listItem.textContent = item; list.appendChild(listItem); document.getElementById('input').value = ''; }< /pre >< p >你是否和我一樣，遇到了很多需要在網頁中添加元素的情況？比如說，你要寫一個購物車頁面，你需要將用戶選中的商品添加到購物車中，或者你需要寫一個待辦清單頁面，需要將用戶錄入的任務添加到清單中。這時候，我們就需要用到Javascript來幫我們實現這些功能。

< p >上面這段代碼就是一個非常簡單的Demo程序。它的作用是將用戶輸入的內容顯示在一個列表中。

< p >首先，我們通過getElementById方法獲取到用戶輸入的內容和將要顯示列表的元素。然后，我們創建一個li元素，并將用戶輸入的內容作為該元素的textContent。最后，我們將這個li元素添加到列表中。最后一行代碼的作用是，將輸入框中的內容清空，以便用戶繼續輸入。

< p >這樣，一個非常簡單的Demo就完成了。在實際開發中，我們可以根據自己的需求修改代碼，從而達到不同的效果。

< pre >var showHide = function() { var button = document.getElementById('button'); var content = document.getElementById('content'); if (content.style.display === 'none') { content.style.display = 'block'; button.textContent = 'Hide content'; } else { content.style.display = 'none'; button.textContent = 'Show content'; } }< /pre >< p >除了上面這個例子，我們還可以看一個控制元素顯示和隱藏的Demo程序。比如說，你要做一個折疊菜單，當用戶點擊某個按鈕時，相關內容會顯示出來，再次點擊會隱藏。

< p >這個Demo程序中，我們通過getElementById方法獲取到按鈕和需要顯示/隱藏的元素。當用戶點擊按鈕時，我們判斷content元素的display屬性是否為none，如果是，我們將其改成block，反之亦然。同時，我們也動態地修改按鈕的textContent，以便讓用戶了解當前的狀態。

< p >這兩個Demo程序都非常簡單，但是它們卻包含了很多常用的Javascript操作方法，比如說獲取元素、修改元素內容、動態添加元素、控制元素顯示和隱藏等。希望通過這些例子，你能夠了解到Javascript的應用場景和基本用法，從而更好地進行頁面開發。