Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法

更新時(shí)間：2015年02月10日 10:33:39 作者：woshisap

這篇文章主要介紹了Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法,實(shí)例分析了js針對(duì)表單節(jié)點(diǎn)進(jìn)行添加操作的常用技巧,需要的朋友可以參考下

本文實(shí)例講述了Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法。分享給大家供大家參考。具體如下：

1. 代碼

<!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>增加節(jié)點(diǎn)</title>  

<script type="text/javascript">  

   function newPicture() {  

       var picElement = document.createElement("img");  

       picElement.src = "images/success.jpg";  

       picElement.width = 100;  

       picElement.height = 100;  

       document.body.appendChild(picElement);  

   }  

   function newNode() {  

       var olElement = document.getElementById('answers');  

       var liElement = document.createElement('li');  

       var inputElement = document.createElement('input');  

       inputElement.type = "text";  

       inputElement.name = "answer";  

       liElement.appendChild(inputElement);  

       olElement.appendChild(liElement);  

   }  

</script>  

</head>  

<body>  

 <div>  

    <input type="button" name="button" value="增加一張圖片" onclick="javascript:newPicture();"/>     

    <input type="button" name="button" value="增加一個(gè)選項(xiàng)" onclick="javascript:newNode();"/><br />  

    <ol id="answers">  

        <li><input type="text" name="answer" /></li>  

    </ol>  

 </div>  

</body>  

</html>

2. 程序效果圖：

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

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)窗口全屏示例詳解
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)窗口全屏示例，包含全屏事件、退出全屏事件等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
在IE,Firefox,Safari,Chrome,Opera瀏覽器上調(diào)試javascript
前支持javascript調(diào)試功能的工具越來越多，主要分為ie和firefox兩大陣營。其他瀏覽器上很難調(diào)試javascript。而Javascript Debug Toolkit解決了這個(gè)問題，可能在所有支持ajax請(qǐng)求的瀏覽器上調(diào)試javascript.
2008-12-12
javascript中xml操作實(shí)現(xiàn)代碼
好久沒寫了。感覺今時(shí)今日，HTML5 還依然只是一種玩票的東東。但愿 w3c 的標(biāo)準(zhǔn)可以早一點(diǎn)出臺(tái)，不要讓各種瀏覽器的兼容問題和支持程度搞死
2011-11-11
詳解JS中的compose函數(shù)和pipe函數(shù)用法
這篇文章主要介紹了JS中的compose函數(shù)和pipe函數(shù)用法，想深入了解Javascript的同學(xué)，可以參考下
2021-04-04
一句話JavaScript表單驗(yàn)證代碼
純屬技術(shù)交流，在實(shí)際應(yīng)用中不建議那么做。建議js加載比較好。
2009-08-08
微信小程序中使用自定義圖標(biāo)（阿里icon）的方法
這篇文章主要介紹了微信小程序中使用自定義圖標(biāo)（阿里icon）的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法,涉及javascript針對(duì)json數(shù)組數(shù)據(jù)的遍歷、判斷、存取等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】
下面小編就為大家?guī)硪黄猨avascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧
2016-04-04
js no-repeat寫法背景不重復(fù)
js控制背景不重復(fù)的代碼
2009-03-03
在Postman的腳本中如何使用pm對(duì)象獲取接口的請(qǐng)求參數(shù)
這篇文章主要介紹了在Postman的腳本中如何使用pm對(duì)象獲取接口的請(qǐng)求參數(shù),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09