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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
JS扩展方法实例分析
Apr 15 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jquery实现上传图片功能
Jun 29 jQuery
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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python输入多行字符串的方法总结
2019/07/02 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
职称自我鉴定
2013/10/15 职场文书
毕业生文员求职信
2013/11/03 职场文书
打架检讨书500字
2014/01/29 职场文书
四个太阳教学反思
2014/02/01 职场文书
经典团队口号大全
2014/06/21 职场文书
员工担保书范本
2015/09/22 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python