JavaScript简单实现动态改变HTML内容的方法示例
本文实例讲述了JavaScript简单实现动态改变HTML内容的方法。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript:改变 HTML 内容</title> <script> function myFunction() { x = document.getElementById("demo"); console.dir(x); x.innerHTML = "欢迎访问我们 www.jb51.net";//改变内容 x.style.color="#ff0000"; //改变样式 } </script> </head> <body> <p id="demo">js能够改变html元素的内容。</p> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试运行上述代码,可得到如下运行结果:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
详解js的事件处理函数和动态创建html标记方法
1 HTML的事件属性 全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发的事件(应用到 <body> 标签),常用的为onload. b. Form事件,由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):常用的为onblur.onfocus.onselect.onsubmit. c. keybord事件 d.Mouse
-
用javascript动态注释掉HTML代码
用javascript动态注释掉HTML代码 - 51windows.Net 1 2 3 4 alert("34") 5 6 alert("56") 7 8 你没有看到34单元格吧,因为他用javascript注释掉了,怎么做的?看源文件!源文件怎么看?点右键,选择"查看源文件(V)"... 注意:动态注释的html中不能再有html注释代码"<!-- -->",<script>与</ scrip
-
JavaScript动态改变HTML页面元素例如添加或删除
可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht
-
js 动态创建 html元素
js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500px; position:relative;} #s{ background:#FFF; width:1px; height:1px; overflow:hidden; position:absolute;} 没事造星星玩 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&
-
JS自动生成动态HTML验证码页面
本文为大家分享了JS自动生成动态HTML验证码页面,输入错误自动清空输入框功能,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>验证码</title> <meta charset="utf-8" /> <style type="text/css"> #code { font-family: Arial; font-style: it
-
JS简单实现动态添加HTML标记的方法示例
本文实例讲述了JS简单实现动态添加HTML标记的方法.分享给大家供大家参考,具体如下: 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现. CreateElement()方法可以根据一个指定的类型来创建一个HTML标记. 语法: sElement=document.createElement(sName) sElement:用来接收该方法返回的一个对象. sName:用来设置HTML标记的类型和基本属性. 二 应用 动态添加一个文本框 本示例通过单击"动态添加文
-
JS函数修改html的元素内容,及修改属性内容的方法
修改元素内容: <body> <p id="pid">Hello</p> <button onclick="demo()">按钮</button> <script> function demo(){ var nv = document.getElementById("pid"); nv.innerHTML="World"; } </script>
-
JS实现动态生成html table表格的方法分析
本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有如下代码: <table> <tbody id="tbody1"> </tbody> </table> 如果想在table里面加其他的可以随便加(
-
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
本文实例讲述了JavaScript基于Dom操作实现查找.修改HTML元素的内容及属性的方法.分享给大家供大家参考,具体如下: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C
随机推荐
- 全选复选框JavaScript编写小结(附代码)
- JS去掉字符串前后空格、阻止表单提交的实现代码
- 解析Java的Jackson库中对象的序列化与数据泛型绑定
- java中的Io(input与output)操作总结(二)
- Spring Boot高级教程之Spring Boot连接MySql数据库
- 深入讲解Python中的迭代器和生成器
- YII2 实现多语言配置的方法分享
- thinkphp常见路径用法分析
- 在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
- encode脚本和normal脚本混用的问题与解决方法
- 利用Golang生成整数随机数方法示例
- 侧栏跟随滚动的简单实现代码
- ReactNative踩坑之配置调试端口的解决方法
- 详解SSH框架和Redis的整合
- JQuery 实现的页面滚动时浮动窗口控件
- Android 四种动画效果的调用实现代码
- C语言中压缩字符串的简单算法小结
- *.ashx文件不能访问Session值的解决方法
- c++面试题字符串拷贝函数示例
- 详解C++文件读写操作