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程序 入门者学习
Jul 09 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
python处理csv数据的方法
2015/03/11 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
介绍一下sql server的安全性
2014/08/10 面试题
审计工作个人的自我评价
2013/12/25 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
骨干教师培训制度
2014/01/13 职场文书
调解协议书
2014/04/16 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
爱心捐书倡议书
2015/04/27 职场文书
喋血孤城观后感
2015/06/08 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
利用Java连接Hadoop进行编程
2022/06/28 Java/Android