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 相关文章推荐
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
我心目中的好老师活动方案
2014/08/19 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
化工厂员工工作总结
2015/10/15 职场文书
社会实践心得体会范文
2016/01/14 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python