JavaScript實作動態新增Form表單元素的方法範例

這篇文章主要介紹了JavaScript實作動態新增Form表單元素的方法,結合實例形式分析了javascript表單元素操作相關函數使用方法與相關注意事項,對JavaScript有興趣的朋友可以參考下本文章！

之前寫過類似的文章（如：javascript實現的動態添加表單元素input,button等）,現在看來比較初級,弄一個高級的簡單的

情景: 後台要上傳遊戲截圖,截圖數量不確定,因此使用動態添加input節點的方法去實現這個效果

主要用到的函數有:

##document.getElementById();

objNode.parentNode;

objNode.cloneNode() ;

objNode.removeAtrribute();

objNode.innerHTML();

#objNode .appendChild();

html:

<p class="well well-sm">
  <p class="form-group">
    <label class="form-label">游戏截图:</label>
    <input type="file" name="jietu[]" class="form-input">
    <span class="form-tip" onclick="add_jietu()"><font color="#428bca">点击添加游戏截图</font></span>
  </p>
  <p class="form-group" id="add_jietu">
    <label class="form-label">游戏截图:</label>
    <input type="file" name="jietu[]" class="form-input">
  </p>
</p>

javascript:##

<script type="text/javascript">
function add_jietu()
{
  var add_jietu = document.getElementById(&#39;add_jietu&#39;);
  var nodeFather = add_jietu.parentNode;
  var node_clone = add_jietu.cloneNode();
  content = add_jietu.innerHTML;
  node_clone.removeAttribute(&#39;id&#39;);
  node_clone.innerHTML = content;
  nodeFather.appendChild(node_clone);
}
</script>

注意:

1. js第6行使用的是"克隆節點"函數,克隆後的節點裡邊並沒有html,需要第9行的程式碼去填充內容

2. 使用克隆功能,因為該方法產生的變數類型是"節點類型", 才可以用到appendChild()函數裡做參數

3. 節點的nextSibling 和lastChild 屬性得到的變數是Text類型(在chrome的調試視窗中看到的)

相關推薦：

javascript瀏覽器用戶代理檢測腳本方法詳解

三種JavaScript模擬實作封裝的方式及寫入法區別分享

詳解JavaScript自執行函數與jQuery擴充方法

以上是JavaScript實作動態新增Form表單元素的方法範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！