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 相关文章推荐
js展开闭合效果演示代码
Jul 24 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
一个基于PDO的数据库操作类
2011/03/24 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
清空上传控件input file的值
2010/07/03 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
JS实现按钮颜色切换效果
2020/09/05 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
Python中的pprint折腾记
2015/01/21 Python
Python入门教程之if语句的用法
2015/05/14 Python
python中的常量和变量代码详解
2018/07/25 Python
Flask之请求钩子的实现
2018/12/23 Python
Python Gitlab Api 使用方法
2019/08/28 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
如何利用Python写个坦克大战
2020/11/18 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
村党支部换届选举方案
2014/05/02 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
地陪导游欢迎词
2015/01/26 职场文书
专家推荐信怎么写
2015/03/25 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
学校百日安全活动总结
2015/05/07 职场文书
借钱欠条怎么写
2015/07/03 职场文书
期中考试后的感想
2015/08/07 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server
用python批量解压带密码的压缩包
2021/05/31 Python
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers