动态增加元素的DOM操作

痛定思痛。 2021-12-17 15:27 222阅读 0赞

动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：

#### 效果演示 ####

<table>  动态添加用户  
 <tbody> 
  <tr> 
   <td>添加新的用户名</td> 
   <td> &nbsp;</td> 
  </tr> 
  <tr> 
   <td colspan="2">用户信息</td> 
  </tr> 
 </tbody> 
</table>

#### JavaScript代码 ####

[view source][]

[print][] [?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td><code>02</code></td> 
   <td><code>&lt;meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html; charset=utf-8"</code><code>&gt;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>04</code></td> 
   <td><code>&lt;title&gt;DOM-动态添加和删除元素&lt;/title&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>05</code></td> 
   <td><code>&lt;style type=</code><code>"text/css"</code><code>&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>06</code></td> 
   <td><code>body,td,caption,input{ font-size:12px; } </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>07</code></td> 
   <td><code>.test { border-collapse:collapse; } </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>08</code></td> 
   <td><code>.test td { border:1px solid</code> <code>#ccc; line-height:150%;&nbsp; }&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>09</code></td> 
   <td><code>&lt;/style&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>10</code></td> 
   <td><code>&lt;script language=</code><code>"javascript"</code><code>&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>11</code></td> 
   <td><code>var</code> <code>count = 0;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>12</code></td> 
   <td><code>//添加新用户的操作&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>13</code></td> 
   <td><code>function</code> <code>addNewUser() </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>15</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//得到文本框对象&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>16</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>objName = document.getElementById(</code><code>'name'</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>17</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(objName.value==</code><code>""</code><code>) </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>19</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"用户名不能为空！"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>20</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>objName.focus();&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>21</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>25</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>count++;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>26</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//先创建行tr&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>27</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>row = document.createElement(</code><code>"tr"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>28</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//设置行对象的ID属性为用户输入的用户名称&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>29</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>row.setAttribute(</code><code>"id"</code><code>,objName.value+count);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>30</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//创建td对象&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>31</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>column = document.createElement(</code><code>"td"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>32</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//td对象下添加子节点 - 内容 TextNode 对象&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>33</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>column.appendChild(document.createTextNode(objName.value));&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>34</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//row对象将td对象添加为子节点对象&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>35</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>row.appendChild(column);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>37</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//再创建删除按钮&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>38</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>delBtn = document.createElement(</code><code>"input"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>40</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>delBtn.setAttribute(</code><code>"type"</code><code>,</code><code>"button"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>42</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>delBtn.setAttribute(</code><code>"value"</code><code>,</code><code>"Delete"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>44</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//设置对象的事件处理 - 所调用的函数&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>45</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>name = objName.value+count;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>46</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>delBtn.onclick= </code><code>function</code><code>(){delUser(name);};&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>48</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>column = document.createElement(</code><code>"td"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>49</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>column.appendChild(delBtn);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>51</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//行对象添加&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>52</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>row.appendChild(column);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>53</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//添加这一行到tbody中&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>54</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.getElementById(</code><code>'userList'</code><code>).appendChild(row);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>55</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>objName.value=</code><code>""</code><code>;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>59</code></td> 
   <td><code>function</code> <code>delUser(name) </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>63</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>objRow = document.getElementById(name);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>64</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>objTBODY = document.getElementById(</code><code>"userList"</code><code>);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>66</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>objTBODY.removeChild(objRow);&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>69</code></td> 
   <td><code>&lt;/script&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>73</code></td> 
   <td><code>&lt;table align=</code><code>"center"</code> <code>width=</code><code>"40%"</code> <code>cellspacing=</code><code>"0"</code> <code>class=</code><code>"test"</code><code>&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>74</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;caption align=</code><code>"center"</code><code>&gt;动态添加用户&lt;/caption&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>76</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;td&gt;添加新的用户名&lt;/td&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>77</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;td&gt;&lt;input type=</code><code>"text"</code> <code>id=</code><code>"name"</code><code>&gt; &nbsp;&lt;input type=</code><code>"button"</code> <code>value=</code><code>"添 加"</code> <code>onClick=</code><code>"addNewUser()"</code><code>&gt;&lt;/td&gt;&nbsp;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>80</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;td colspan=</code><code>"2"</code><code>&gt;用户信息&lt;/td&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>83</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;tbody id=</code><code>"userList"</code><code>&gt;&lt;/tbody&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>84</code></td> 
   <td><code>&lt;/table&gt;&nbsp;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/kungfupanda/archive/2010/09/26/1825139.html

[view source]: http://www.nowamagic.net/javascript/js_AddAndDeleteElement.php#viewSource
[print]: http://www.nowamagic.net/javascript/js_AddAndDeleteElement.php#printSource
[Link 1]: http://www.nowamagic.net/javascript/js_AddAndDeleteElement.php#about