Js為表單動態(tài)添加節(jié)點內(nèi)容的方法
更新時間:2015年02月10日 10:33:39 作者:woshisap
這篇文章主要介紹了Js為表單動態(tài)添加節(jié)點內(nèi)容的方法,實例分析了js針對表單節(jié)點進行添加操作的常用技巧,需要的朋友可以參考下
本文實例講述了Js為表單動態(tài)添加節(jié)點內(nèi)容的方法。分享給大家供大家參考。具體如下:
1. 代碼
復(fù)制代碼 代碼如下:
<!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é)點</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="增加一個選項" onclick="javascript:newNode();"/><br />
<ol id="answers">
<li><input type="text" name="answer" /></li>
</ol>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增加節(jié)點</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="增加一個選項" onclick="javascript:newNode();"/><br />
<ol id="answers">
<li><input type="text" name="answer" /></li>
</ol>
</div>
</body>
</html>
2. 程序效果圖:
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- js form action動態(tài)修改方法
- JavaScript動態(tài)創(chuàng)建form表單并提交的實現(xiàn)方法
- 用JS動態(tài)改變表單form里的action值屬性的兩種方法
- js動態(tài)生成form 并用ajax方式提交的實現(xiàn)方法
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- javascript寫的一個表單動態(tài)輸入提示的代碼
- JavaScript實現(xiàn)動態(tài)增加文件域表單
- javascript創(chuàng)建動態(tài)表單的方法
- JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法示例
相關(guān)文章
TypeScript的安裝、使用、自動編譯的實現(xiàn)
TypeScript是一種由微軟開發(fā)的開源、跨平臺的編程語言。這篇文章主要介紹了TypeScript的安裝、使用、自動編譯的實現(xiàn)方法,需要的朋友可以參考下2020-04-04PHP中如何unicode編碼,在JavaScript中h如何解碼
PHP中如何unicode編碼,在JavaScript中如何解碼?js中h這樣的,怎么轉(zhuǎn)碼?2023-07-07原生javascript運動函數(shù)的封裝示例【勻速、拋物線、多屬性的運動等】
這篇文章主要介紹了原生javascript運動函數(shù)的封裝,結(jié)合實例形式分析了JavaScript封裝勻速、拋物線、多屬性的運動等函數(shù)及相關(guān)使用方法,需要的朋友可以參考下2020-02-02js 替換功能函數(shù),用正則表達式解決,js的全部替換
js 替換功能函數(shù),用正則表達式解決,js的全部替換,學(xué)習(xí)js的朋友可以參考下。2010-12-12javascript避免數(shù)字計算精度誤差的方法詳解
本篇文章主要是對javascript避免數(shù)字計算精度誤差的方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03