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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 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
杏林同学录(五)
2006/10/09 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php中Snoopy类用法实例
2015/06/19 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
九种原生js动画效果
2015/11/11 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Python工程师面试题 与Python Web相关
2016/01/14 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python中django学习心得
2017/12/06 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python图片合成的示例
2020/11/09 Python
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
主题酒店策划书
2014/01/28 职场文书
天网工程实施方案
2014/03/26 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
angular异步验证器防抖实例详解
2022/03/31 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript