永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中。通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢。
改变文字innerHTML
每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记。通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页。
但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠。首先,你必须给予部分要更改身份证。与标识到位,你将能够使用getElementById功能,适用于所有的浏览器。
在您认为建立您现在就可以操纵文字的要素。要开始了,让我们尝试改变文字一个大胆的标记。
下面我们来看一个用js的innerHTML来改变div值吧.

<script type="text/javascript">
//改变innerHtml
//来源:www.jbxue.com
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>

js innerHTML 改变div内容的方法的更多相关文章

  1. JS/javaScript 获取div内容

    jquery: 例如<div id="abc"><a>内容</a></div>$("#abc").html(); ...

  2. js修改剪切板内容的方法

    代码如下: //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy事件. $(document.body).bind({ copy: function(e) {//copy ...

  3. js怎样改变div的宽度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js实现选中div内容并复制到剪切板

    function copyUrl () { var div = document.getElementById('xxxx'); if (document.body.createTextRange) ...

  5. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  6. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  7. DOM操作 、js获取id的内容 和修改原来的内容(innerHTML)

    js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的 ...

  8. JS获取标签内容的方法

    JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. jQuery div内容间隔1秒动态向上滚动HTML、JS代码

    demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...

随机推荐

  1. python——实例方法、静态方法、类方法、类变量和实例变量浅析

    概述: 实例方法就是类的实例能够使用的方法. 静态方法是一种普通函数,就位于类定义的命名空间中,它不会对任何实例类型进行操作.使用装饰器@staticmethod定义静态方法.类对象和实例都可调用静态 ...

  2. 【CMS】DedeCMS Error: (PHP 5.3 and above) Please set 'request_order' ini value to include C,G and P (recommended: 'CGP') in php.ini

    DedeCMS Error: (PHP 5.3 and above) Please set 'request_order' ini value to include C,G and P (recomm ...

  3. position sticky 定位

    1.兼容性 https://caniuse.com/#search=sticky chrome.ios和firefox兼容性良好. 2.使用场景 sticky:粘性.粘性布局. 在屏幕范围内时,元素不 ...

  4. css before和after伪元素应用

    1.说明 ":before" 伪元素可以在元素的内容前面插入新内容. ":after" 伪元素可以在元素的内容之后插入新内容. 伪元素默认展示为inline, ...

  5. python之模块csv之CSV文件一次写入多行

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #CSV文件一次写入多行 import csv #csv文件,是一种常用的文本格式,用以存储表格数据,很多程序 ...

  6. java、c/c++ 、python 等性能比较 杂谈(整理)

    链接:https://www.zhihu.com/question/40393531/answer/133242263著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 有人用pyt ...

  7. CEF 各个版本适应的平台参考表

    This Wiki page provides information about CEF branches and instructions for downloading, building an ...

  8. Linux安装SQLite轻量级数据库

    SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在很多嵌入式产 ...

  9. Rational Rose 2003 逆向工程转换C++源代码成UML类图

    主要介绍用户如何使用Rose的逆向工程生成UML模型,并用来进行C++代码的结构分析. Rational Rose可以支持标准C++和Visual C++的模型到代码的转换以及逆向工程.下面将详细地说 ...

  10. HDFS架构设计

    原文:http://hadoop.apache.org/docs/r2.6.4/hadoop-project-dist/hadoop-hdfs/HdfsDesign.html 介绍 HDFS是个分布式 ...