快捷導(dǎo)航

JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例

更新時(shí)間：2017年04月28日 09:47:24 作者：zxl0016

這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法,涉及javascript事件響應(yīng)及針對頁面dom元素節(jié)點(diǎn)與屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法。分享給大家供大家參考，具體如下：

運(yùn)行效果圖如下：

完整實(shí)例代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js(DOM)動(dòng)態(tài)添加節(jié)點(diǎn)和事件</title>
<script type="text/javascript">
function addEl(){
  //找到要添加節(jié)點(diǎn)的父節(jié)點(diǎn)(table)
  var tb = document.getElementById("tb");
  //創(chuàng)建tbody節(jié)點(diǎn)，表格中必須有tbody才能添加，直接添加tr不成功
  var tbody = document.createElement("tbody");
  //創(chuàng)建tr節(jié)點(diǎn)
  var tr = document.createElement("tr");
  //創(chuàng)建td節(jié)點(diǎn)
  var td = document.createElement("td");
  //添加一個(gè)文本框節(jié)點(diǎn)，設(shè)置id和type屬性
  var newTp = document.createElement("input");
  newTp.id = "text1";
  newTp.type = "text";
  //添加一個(gè)按鈕
  var newEl = document.createElement("input");
  newEl.type = 'button';
  newEl.value = "button";
  newEl.name = "button1";
  //添加onclick事件,和事件執(zhí)行的函數(shù)
  newEl.onclick = function dofun(){
  document.getElementById("txt").value += newTp.value;
  }
  //把2個(gè)節(jié)點(diǎn)添加到td當(dāng)中
  td.appendChild(newTp)
  td.appendChild(newEl);
  //把td添加到tr中
  tr.appendChild(td);
  //把tr添加到td中
  tbody.appendChild(tr);
  //把td添加到table中
  tb.appendChild(tbody);
}
</script>
</script>
</head>
<body>
<table id="tb">
  <tr>
  <td>
   添加節(jié)點(diǎn)的地方
  </td>
  </tr>
</table>
<table>
  <tr>
  <td>
   <input type="button" value="添加節(jié)點(diǎn)" onclick="addEl()" />
  </td>
  <td>
   <input type="text" id="txt"/>
  </td>
  </tr>
</table>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: