JAVASCRIPT網頁應用程式設計

80

|

第五章

動態產生檢視器內容

如果想建立檢視器內容，可以用 JavaScript 程式一步一腳印的建立：先利用

document.

createElement()

建立 DOM 元件、設定元件內容，再把元件加進網頁裡。如果想要更

新檢視器內容，只要先清空檢視器內容，再重複一遍上述步驟即可：

var views = document.getElementById("views");

views.innerHTML = ""; // 清空元件

var container = document.createElement("div");

container.id = "user";

var name = document.createElement("span");

name.innerHTML = data.name;

container.appendChild(name);

views.appendChild(container);

如果想讓程式變得更精簡，可以利用 jQuery 的 API：

$("#views").empty();

var container = $("<div />").attr({id: "user"});

var name = $("<span />").text(data.name);

$("#views").append(container.append(name));

不過建議只有在檢視器內容非常少時，才用前述這種做法。因為把檢視器相關程式碼寫

進控制器或狀態物件裡，會破壞程式的 ...