不想上班的程式筆記

1.InnerHTML (#76)

組完字串後，進行語法渲染，優點:效能快；缺點:資安風險

InnerHTML語法,增加html標籤在裡面，特性為先清空再塞值

var el = document.getElementById('.css');
el.innerHTML = '<li>1234</li>'

參考範例

2.CreateElement 增加一個html 元素 (#80)

以DOM節點來處理，優點:安全性高;缺點:效能慢

// node:子節點
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Test~");
newDiv.appendChild(newContent);

參考範例

3.appendChild

要留意的是 如果 appendChild 使用時，append 上去的是一個已存在的 node 時，它會做的是搬移，而非複製。

另一種寫法配合for迴圈

這個通常用在 <li>,表格<td><th>等...

以表格來說

表格html 如下

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

從上圖發現，會一直重複的有 <th> <tr> <td> 

所以要loop的地方就是這些 for迴圈針對就在這三節點。

以下介紹的是動態產生table的實作！

// 動態產生一個表
function generate_table() { 
  var body = document.getElementsByTagName("body")[0];

  // 建立一個 <table> 及 <tbody> 元素
  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  // 建立for loop cells
  for (var i = 0; i < 2; i++) {
   // 建立tr節點
    var row = document.createElement("tr");
    for (var j = 0; j < 2; j++) {
      // 建立td節點
      var cell = document.createElement("td");
      var cellText = document.createTextNode("cell in row "+i+", column "+j);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }
    // 塞入 row 到tbody
    tblBody.appendChild(row);
  }  
  // 塞入tbody到table
  tbl.appendChild(tblBody);
  // 塞入body
  body.appendChild(tbl);

  // 建立border樣式
  tbl.setAttribute("border", "5");
}

產生樣式如下

練習區

 

 

主要是做我的學習筆記

偶而心血來潮寫個幾篇~

若有問題~可以寫信或在下方留言~感謝