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. 代碼
復(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é)點(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>
<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ì)有所幫助。
您可能感興趣的文章:
- js form action動(dòng)態(tài)修改方法
- JavaScript動(dòng)態(tài)創(chuàng)建form表單并提交的實(shí)現(xiàn)方法
- 用JS動(dòng)態(tài)改變表單form里的action值屬性的兩種方法
- js動(dòng)態(tài)生成form 并用ajax方式提交的實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)的動(dòng)態(tài)添加表單元素input,button等(appendChild)
- javascript寫的一個(gè)表單動(dòng)態(tài)輸入提示的代碼
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)增加文件域表單
- javascript創(chuàng)建動(dòng)態(tài)表單的方法
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加Form表單元素的方法示例
相關(guān)文章
TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)
TypeScript是一種由微軟開發(fā)的開源、跨平臺(tái)的編程語(yǔ)言。這篇文章主要介紹了TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-04-04
PHP中如何unicode編碼，在JavaScript中h如何解碼
PHP中如何unicode編碼，在JavaScript中如何解碼？js中h這樣的，怎么轉(zhuǎn)碼？2023-07-07
這篇文章主要介紹了JS加載器如何動(dòng)態(tài)加載外部js文件的相關(guān)資料,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)?lái)一篇JavaScript注入漏洞的原理及防范(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
原生javascript運(yùn)動(dòng)函數(shù)的封裝示例【勻速、拋物線、多屬性的運(yùn)動(dòng)等】
這篇文章主要介紹了原生javascript運(yùn)動(dòng)函數(shù)的封裝,結(jié)合實(shí)例形式分析了JavaScript封裝勻速、拋物線、多屬性的運(yùn)動(dòng)等函數(shù)及相關(guān)使用方法,需要的朋友可以參考下2020-02-02
js 替換功能函數(shù)，用正則表達(dá)式解決，js的全部替換
js 替換功能函數(shù)，用正則表達(dá)式解決，js的全部替換，學(xué)習(xí)js的朋友可以參考下。2010-12-12
這篇文章主要介紹了js如何獲取type=radio值,需要的朋友可以參考下2014-05-05
排序算法的理解算是程序員的基本功之一了，其功能是對(duì)一個(gè)數(shù)據(jù)元素集合或序列重新排列成一個(gè)按數(shù)據(jù)元素某個(gè)項(xiàng)值有序的序列。2011-02-02
javascript避免數(shù)字計(jì)算精度誤差的方法詳解
本篇文章主要是對(duì)javascript避免數(shù)字計(jì)算精度誤差的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
首先說(shuō)下背景，該code用于一個(gè)多條件查詢界面，原本該查詢條件由一個(gè)下拉列表提供，但是由于下拉列表數(shù)據(jù)量過(guò)大，用戶使用不方便，便希望在頁(yè)面給出一個(gè)智能提示的功能，但搜索的數(shù)據(jù)來(lái)自下拉列表2009-11-11