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写法
Sep 15 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
JavaScript this使用方法图解
Feb 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
两个开源的Php输出Excel文件类
2010/02/08 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php格式文件打开的四种方法
2018/02/24 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python计算N天之后日期的方法
2015/03/31 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Django 返回json数据的实现示例
2020/03/05 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
上海方立数码笔试题
2013/10/18 面试题
初中优秀教师事迹材料
2014/08/18 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电