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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
javascript去除空格方法小结
May 21 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 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
星际RPG字典
2020/03/04 星际争霸
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP中的加密功能
2006/10/09 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python模拟三级菜单效果
2017/09/11 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
django 控制页面跳转的例子
2019/08/06 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Python try except finally资源回收的实现
2021/01/25 Python
思想品德自我鉴定
2013/10/12 职场文书
会计顶岗实习心得
2014/01/25 职场文书
授权委托书
2014/07/31 职场文书
委托书的写法
2014/08/30 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
运输公司工作总结
2015/08/11 职场文书
安全教育的主题班会
2015/08/13 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫