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-04
PHP中如何unicode編碼，在JavaScript中h如何解碼
PHP中如何unicode編碼，在JavaScript中如何解碼？js中h這樣的，怎么轉(zhuǎn)碼？2023-07-07
這篇文章主要介紹了JS加載器如何動態(tài)加載外部js文件的相關(guān)資料,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄狫avaScript注入漏洞的原理及防范(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
原生javascript運動函數(shù)的封裝示例【勻速、拋物線、多屬性的運動等】
這篇文章主要介紹了原生javascript運動函數(shù)的封裝,結(jié)合實例形式分析了JavaScript封裝勻速、拋物線、多屬性的運動等函數(shù)及相關(guān)使用方法,需要的朋友可以參考下2020-02-02
js 替換功能函數(shù)，用正則表達式解決，js的全部替換
js 替換功能函數(shù)，用正則表達式解決，js的全部替換，學(xué)習(xí)js的朋友可以參考下。2010-12-12
這篇文章主要介紹了js如何獲取type=radio值,需要的朋友可以參考下2014-05-05
排序算法的理解算是程序員的基本功之一了，其功能是對一個數(shù)據(jù)元素集合或序列重新排列成一個按數(shù)據(jù)元素某個項值有序的序列。2011-02-02
javascript避免數(shù)字計算精度誤差的方法詳解
本篇文章主要是對javascript避免數(shù)字計算精度誤差的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
首先說下背景，該code用于一個多條件查詢界面，原本該查詢條件由一個下拉列表提供，但是由于下拉列表數(shù)據(jù)量過大，用戶使用不方便，便希望在頁面給出一個智能提示的功能，但搜索的數(shù)據(jù)來自下拉列表2009-11-11