innerHTML

1、查找元素——document.getElementById("intro")

2、输出查找的结果：

(1)var a=document.getElementById("intro");

document.write(a.innerHTML);

 (2) <div id="me"><b>试试吧</b></div>

var b=document.getElementById("me");
     document.write(b.innerHTML);//write输出试试吧

     alert(b.innerHTML)//alert输出的是<b>试试吧</b> 代码+文字

      alert(b.innerText)//只输出文字——试试吧

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<p id="intro"><b>Hello World!</b></p><!--p代表段落 b是加粗 -->

<p>本例演示 <b>getElementById</b> 方法！</p>

<div id="me"><b>试试吧</b></div>

</body>

</html>

<script>

//通过id来查找HTML中的元素

var a=document.getElementById("intro");

document.write(a.innerHTML);

var b=document.getElementById("me");

document.write(b.innerHTML);//write输出试试吧

alert(b.innerHTML)//alert输出的是<b>试试吧</b>  代码+文字

alert(b.innerText)//只输出文字

b.innerHTML=" ";//赋个空字符串

b.innerHTML="<font color=red>我换了</font>";//重新设置内容

//改可以直接写成

/*var b=document.getElementById("me");

document.write(b.innerHTML="我换了")*/

</script>

结果为：

例子：通过p标签的id来获取内容并修改为新的内容

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

<p>上面的段落被一条 JavaScript 脚本修改了。</p>

</body>

</html>

结果：

New text!

上面的段落被一条 JavaScript 脚本修改了。

再举例：

同样方法，只是写法不同

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

<script>

var element=document.getElementById("header");

element.innerHTML="New Header";

</script>

<p>"Old Header" 已被修改为 "New Header"。</p>

</body>

</html>

New Header

"Old Header" 已被修改为 "New Header"。

再举一个，改变图片的：

<!DOCTYPE html>

<html>

<body>

<img id="image" src="/i/eg_tulip.jpg" />

<script>

document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";

</script>

<p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p>

</body>

</html>

原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。

 

JavaScrip——DOM操作（查找HTML元素/修改元素）的更多相关文章

  1. jQuery使用(五)：DOM操作之插入和删除元素

    插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remov ...

  2. DOM操作（二）对元素的操作（创建，追加，删除）

    1 创建新的 HTML 元素 (节点) var divDom=document.createElement('div'); 2 添加新元素到尾部 element.appendChild(para); ...

  3. JavaScrip——DOM操作（属性操作）

    Attribute a.setAttribute("属性名","属性值")——设置属性 a.getSttribute("属性名")——获取属 ...

  4. jQuery 源码解析(二十三) DOM操作模块 替换元素 详解

    本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value)     ;使用提供的新内容来替换匹配元素集合中的每个元 ...

  5. Dom修改元素样式

    提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className    ...

  6. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  7. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  8. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  9. JavaScript--DOM修改元素的属性

    一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...

随机推荐

  1. LeetCode-342：Power of Four

    This  is another  "Pick One" Problem :[Problem:342-Power of Four] Given an integer (signed ...

  2. Android之SurfaceView使用总结

    1.概念SurfaceView是View类的子类,可以直接从内存或者DMA等硬件接口取得图像数据,是个非常重要的绘图视图.它的特性是:可以在主线程之外的线程中向屏幕绘图上.这样可以避免画图任务繁重的时 ...

  3. PLSQL_统计信息系列08_统计信息生成和还原

    2015-02-01 Created By BaoXinjian

  4. rubygems ruby国内源

    rubygems.org资源不能正常访问,需要调整一下GEM的source镜像 1.首先确认一下当前source镜像地址 gem sources -l 服务器为 https://    ruby    ...

  5. Linux 使用YUM安装mysql

    yum -y install mysql-server ,系统自动下载和安装Mysql的,chkconfig --add mysqld 在服务清单中添加mysql服务service mysqld st ...

  6. 初学 Haskell 练习：算24点

    其中用到了 Monad 做不确定性计算.运行速度很快. -- woodfox, Oct 10, 2014 import Control.Applicative import Control.Monad ...

  7. ISE设置默认引脚 ，上拉或下拉或三态

    quartus可以在Devic and Pin Options里设置默认引脚状态, ISE也有这个功能,步骤如下, 1.右击Generate Programming File 2.选择Process ...

  8. [sh]shell案例

    调用同目录下的ip.txt内容: 路径 [root@lanny ~]# pwd /root txt文件 [root@lanny ~]# cat ip.txt 10.1.1.1 10.1.1.2 10. ...

  9. 玩转oracle学习第七天

     1.上节回想 2.PL/SQL的进阶 3.oracle的视图 4.oracle的触发器 目标: 1.掌握PL/SQL的高级使用方法(能编写分页过程模块,下订单过程模块.. . ) 2.会处理or ...

  10. 解决Git在Linux 乱码问题

    在Linux如果要提交的文件名是中文的,默认git commit的时候就会把中文显示为一串数字如下: create mode "\346\265\213\350\257\225" ...