JavaScript动态修改网页元素内容的方法


Posted in Javascript onMarch 21, 2015

本文实例讲述了JavaScript动态修改网页元素内容的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码当用户点击提交按钮后,通过元素的textContent或者innerHTML动态指定元素的内容

<script type="text/javascript">
function showCard() {
 var message = document.getElementById("CCN").value;
 var element = document.getElementById("mycreditcardnumber");
 element.textContent = message;
//for Firefox
 element.innerHTML = message;
//for IE (why can't we all just get along?)
 return true;
}
</script>
<form name="dynamic" method="get">
<span>Enter Your Credit Card Number:</span>
<input type="text" id="CCN" name="CCN" value="CCN" />
<input type="button" value="submit" onclick="showCard()" />
</form>
<p>Verify your Credit Card Number:
 <span id="mycreditcardnumber">0000-00-0000-00 </span>
</p>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
DIV菜单层实现代码
Nov 19 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
js获取滚动距离的方法
May 30 Javascript
js实现本地时间同步功能
Aug 26 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 #Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 #Javascript
JavaScript动态加载样式表的方法
Mar 21 #Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 #Javascript
JavaScript删除数组元素的方法
Mar 20 #Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 #Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 #Javascript
You might like
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
拥抱模块化的JavaScript
2012/03/07 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python抓取网页内容示例分享
2014/02/24 Python
python利用beautifulSoup实现爬虫
2014/09/29 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python logging添加filter教程
2019/12/24 Python
Python @property原理解析和用法实例
2020/02/11 Python
大学生涯自我鉴定
2014/01/16 职场文书
给市场的环保建议书
2014/05/14 职场文书
党校个人总结
2015/03/04 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书