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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
vue bootstrap小例子一枚
Jun 09 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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采集速度探究总结(原创)
2008/04/18 PHP
mysql limit查询优化分析
2008/11/12 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
React Router基础使用
2017/01/17 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
开源Web应用框架Django图文教程
2017/03/09 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
网络技术专业求职信
2014/07/13 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书