<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>

注意:其中用红色标示的部分为可以改变的内容,即完成点击动作之后会把通过ID找到的内容替换行内容,这里是一段文字,也可以换成图片,但是图片是的格式是单引号

例如:='<img src="url" alt="">';

其他内容原理类似

关于JS点击button之灵活替换改变内容方法的更多相关文章

  1. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  2. [转帖]Linux下批量替换文件内容方法

    Linux下批量替换文件内容方法 https://www.cnblogs.com/fjping0606/p/4428850.html 刚才用到的命令 原作者写的挺好的记录一下 以后 用. 1:查找fi ...

  3. Android点击Button实现功能的几种方法

          Android中Button控件应该算作是比较简单的控件,然而,它的使用频率却是非常的高,今天,我在这里总结了三种常用的点击Button实现其功能的方法.       1.很多时候,我们在 ...

  4. js点击button按钮跳转到页面代码

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

  5. js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

  6. Linux下批量替换文件内容方法

    1:查找find . -type f -name "*.html"|xargs grep ‘yourstring’ 2:查找并替换find -name '要查找的文件名' | xa ...

  7. js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  8. 点击button触发onclick事件判空后依旧自动跳转

    这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; v ...

  9. js点击按钮倒计时setTimeout和setInterval

    setTimeout() 用于在指定的毫秒数后调用函数或计算表达式,只执行 code 一次. setInterval() 可按照指定的周期(以毫秒计)来调用函数或计算表达式,不停地调用函数,直到 cl ...

随机推荐

  1. listen 61

    Multiple Stresses Killed Snail Memory Stress sucks. It can affect your body and mind. Previous resea ...

  2. Mac替换sublime图标

    下载.icns格式一个图标:http://www.easyicon.net/language.en/iconsearch/sublime/ 终端执行:open /Applications/Sublim ...

  3. 1139 First Contact(30 分)

    Unlike in nowadays, the way that boys and girls expressing their feelings of love was quite subtle i ...

  4. 连续4个小时ping不通远端主机,则本机关机

    #!/bin/bash #连续4个小时ping不通远端主机,则本机关机. begin_time=$(date "+%s") while true;do sleep 2 ping - ...

  5. Mongo可视化工具基本操作

    一.可视化工具界面(字段名可以不加引号) 二.查询(query)1.日期如:"F1":ISODate("2017-07-26T16:00:00Z")2.条件(& ...

  6. u-boot.lds 链接脚本分析(hi3515)

    目录:/u-boot_hi3515/board/hi3515v100 OUTPUT_FORMAT("elf32-littlearm", "elf32-littlearm& ...

  7. 转:Serializable---序列化

    Serializable        今天在看代码的时候,看到[Serializable],不明白是什么意思.查阅了网上的一些资料,才明白这是指给类添加序列化的特性,即添加后它就可以进行序列化,那什 ...

  8. May we can use Turbolinks or Pjax in our web apps

    Turbolinks[1]: Turbolinks makes following links in your web application faster.Instead of letting th ...

  9. js操作Iframe非当前最上层窗体

    如果当前窗口不是最上层窗口(比如是在Iframe中),那么就把自己变为最上层窗口.  <script language="javascript" type="tex ...

  10. oracle针对中文排序

    在oracle 9i之前,对中文的排序,是默认按2进制编码来进行排序的. 9i时增加了几种新的选择: 按中文拼音进行排序:SCHINESE_PINYIN_M 按中文部首进行排序:SCHINESE_RA ...