Js为表单动态添加节点内容的方法
更新时间：2015年02月10日 10:33:39 作者：woshisap
这篇文章主要介绍了Js为表单动态添加节点内容的方法,实例分析了js针对表单节点进行添加操作的常用技巧,需要的朋友可以参考下
本文实例讲述了Js为表单动态添加节点内容的方法。分享给大家供大家参考。具体如下：
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>增加节点</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>增加节点</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程序设计有所帮助。
相关文章
TypeScript是一种由微软开发的开源、跨平台的编程语言。这篇文章主要介绍了TypeScript的安装、使用、自动编译的实现方法,需要的朋友可以参考下2020-04-04
PHP中如何unicode编码，在JavaScript中h如何解码
PHP中如何unicode编码，在JavaScript中如何解码？js中h这样的，怎么转码？2023-07-07
这篇文章主要介绍了JS加载器如何动态加载外部js文件的相关资料,需要的朋友可以参考下2016-05-05
下面小编就为大家带来一篇JavaScript注入漏洞的原理及防范(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
这篇文章主要介绍了原生javascript运动函数的封装,结合实例形式分析了JavaScript封装匀速、抛物线、多属性的运动等函数及相关使用方法,需要的朋友可以参考下2020-02-02
js 替换功能函数，用正则表达式解决，js的全部替换，学习js的朋友可以参考下。2010-12-12
这篇文章主要介绍了js如何获取type=radio值,需要的朋友可以参考下2014-05-05
排序算法的理解算是程序员的基本功之一了，其功能是对一个数据元素集合或序列重新排列成一个按数据元素某个项值有序的序列。2011-02-02
本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
首先说下背景，该code用于一个多条件查询界面，原本该查询条件由一个下拉列表提供，但是由于下拉列表数据量过大，用户使用不方便，便希望在页面给出一个智能提示的功能，但搜索的数据来自下拉列表2009-11-11
最新评论