动态增加元素的DOM操作

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

效果演示

动态添加用户

添加新的用户名
用户信息

JavaScript代码

01
02 "Content-Type" content="text/html; charset=utf-8">
03
04 DOM-动态添加和删除元素
05 <code class="jscript string">"text/css"</code><code class="jscript plain">>   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>06</code></td> <td class="content"><code class="jscript plain">body,td,caption,input{ font-size:12px; } </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>07</code></td> <td class="content"><code class="jscript plain">.test { border-collapse:collapse; } </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>08</code></td> <td class="content"><code class="jscript plain">.test td { border:1px solid</code> <code class="jscript preprocessor">#ccc; line-height:150%;  }   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>09</code></td> <td class="content"><code class="jscript plain">
10 <code class="jscript string">"javascript"</code><code class="jscript plain">>   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>11</code></td> <td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">count = 0;   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>12</code></td> <td class="content"><code class="jscript comments">//添加新用户的操作   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>13</code></td> <td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">addNewUser() </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>14</code></td> <td class="content"><code class="jscript plain">{   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>15</code></td> <td class="content"><code class="spaces">    </code><code class="jscript comments">//得到文本框对象   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>16</code></td> <td class="content"><code class="spaces">    </code><code class="jscript keyword">var</code> <code class="jscript plain">objName = document.getElementById(</code><code class="jscript string">'name'</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>17</code></td> <td class="content"><code class="spaces">    </code><code class="jscript keyword">if</code><code class="jscript plain">(objName.value==</code><code class="jscript string">""</code><code class="jscript plain">) </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>18</code></td> <td class="content"><code class="spaces">    </code><code class="jscript plain">{   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>19</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">alert(</code><code class="jscript string">"用户名不能为空！"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>20</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">objName.focus();   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>21</code></td> <td class="content"><code class="spaces">        </code><code class="jscript keyword">return</code><code class="jscript plain">;   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>22</code></td> <td class="content"><code class="spaces">    </code><code class="jscript plain">} </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>23</code></td> <td class="content"><code class="spaces">    </code><code class="jscript keyword">else</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>24</code></td> <td class="content"><code class="spaces">    </code><code class="jscript plain">{   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>25</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">count++;   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>26</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//先创建行tr   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>27</code></td> <td class="content"><code class="spaces">        </code><code class="jscript keyword">var</code> <code class="jscript plain">row = document.createElement(</code><code class="jscript string">"tr"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>28</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//设置行对象的ID属性为用户输入的用户名称   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>29</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">row.setAttribute(</code><code class="jscript string">"id"</code><code class="jscript plain">,objName.value+count);   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>30</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//创建td对象   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>31</code></td> <td class="content"><code class="spaces">         </code><code class="jscript keyword">var</code> <code class="jscript plain">column = document.createElement(</code><code class="jscript string">"td"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>32</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//td对象下添加子节点 - 内容 TextNode 对象   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>33</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">column.appendChild(document.createTextNode(objName.value));   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>34</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//row对象将td对象添加为子节点对象   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>35</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">row.appendChild(column);   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>36</code></td> <td class="content"><code class="spaces">   </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>37</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//再创建删除按钮   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>38</code></td> <td class="content"><code class="spaces">        </code><code class="jscript keyword">var</code> <code class="jscript plain">delBtn = document.createElement(</code><code class="jscript string">"input"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>39</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//类型   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>40</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">delBtn.setAttribute(</code><code class="jscript string">"type"</code><code class="jscript plain">,</code><code class="jscript string">"button"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>41</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//文本   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>42</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">delBtn.setAttribute(</code><code class="jscript string">"value"</code><code class="jscript plain">,</code><code class="jscript string">"Delete"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>43</code></td> <td class="content"><code class="spaces">   </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>44</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//设置对象的事件处理 - 所调用的函数   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>45</code></td> <td class="content"><code class="spaces">        </code><code class="jscript keyword">var</code> <code class="jscript plain">name = objName.value+count;   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>46</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">delBtn.onclick= </code><code class="jscript keyword">function</code><code class="jscript plain">(){delUser(name);};   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>47</code></td> <td class="content"><code class="spaces">   </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>48</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">column = document.createElement(</code><code class="jscript string">"td"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>49</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">column.appendChild(delBtn);   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>50</code></td> <td class="content"><code class="spaces">                       </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>51</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//行对象添加   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>52</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">row.appendChild(column);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>53</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//添加这一行到tbody中   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>54</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">document.getElementById(</code><code class="jscript string">'userList'</code><code class="jscript plain">).appendChild(row);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>55</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">objName.value=</code><code class="jscript string">""</code><code class="jscript plain">;   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>56</code></td> <td class="content"><code class="spaces">    </code><code class="jscript plain">}   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>57</code></td> <td class="content"><code class="jscript plain">}   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>58</code></td> <td class="content"><code class="jscript comments">//删除元素   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>59</code></td> <td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">delUser(name) </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>60</code></td> <td class="content"><code class="jscript plain">{   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>61</code></td> <td class="content"><code class="spaces">    </code><code class="jscript keyword">if</code><code class="jscript plain">(name!=</code><code class="jscript keyword">null</code><code class="jscript plain">) </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>62</code></td> <td class="content"><code class="spaces">    </code><code class="jscript plain">{   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>63</code></td> <td class="content"><code class="spaces">        </code><code class="jscript keyword">var</code> <code class="jscript plain">objRow = document.getElementById(name);   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>64</code></td> <td class="content"><code class="spaces">        </code><code class="jscript keyword">var</code> <code class="jscript plain">objTBODY = document.getElementById(</code><code class="jscript string">"userList"</code><code class="jscript plain">);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>65</code></td> <td class="content"><code class="spaces">        </code><code class="jscript comments">//删除   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>66</code></td> <td class="content"><code class="spaces">        </code><code class="jscript plain">objTBODY.removeChild(objRow);   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>67</code></td> <td class="content"><code class="spaces">    </code><code class="jscript plain">}   </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>68</code></td> <td class="content"><code class="jscript plain">}   </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>69</code></td> <td class="content"><code class="jscript plain">
70
71
72
73 "center"width="40%"cellspacing="0"class="test">      74     "center">动态添加用户    75         76         添加新的用户名     77         "text" id="name">  "button" value="添 加" onClick="addNewUser()">    78         79         80         "2">用户信息     81      82        "userList">   83      84
  74     "center">动态添加用户
  75
  76         添加新的用户名
   77         "text" id="name">  "button" value="添 加" onClick="addNewUser()">
  78
  79
  80         "2">用户信息
   81
82
"userList">   83
84
85
86

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