這篇文章主要介紹了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('add_jietu');
var nodeFather = add_jietu.parentNode;
var node_clone = add_jietu.cloneNode();
content = add_jietu.innerHTML;
node_clone.removeAttribute('id');
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中文網其他相關文章！
