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. MySQL-关于并发下的mysql_insert_id()

    我们在写数据库程序的时候, 经常会需要获取某个表中的最大序号数, 或者刚插入的数据的ID值, 一般情况下获取刚插入的数据的id, 使用select max(id) from table 是可以的, 但 ...

  2. js getAttribute getAttributeNode

    getAttribute():返回属性值,是一个文本字符串 getAttributeNode("属性名"):返回属性节点,是一个对象 <p id="bj" ...

  3. HDUOJ-----2066一个人的旅行

    一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  4. PAT 1086 Tree Traversals Again

    PAT 1086 Tree Traversals Again 题目: An inorder binary tree traversal can be implemented in a non-recu ...

  5. POJ 3006 Dirichlet's Theorem on Arithmetic Progressions （素数）

    Dirichlet's Theorem on Arithmetic Progressions Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  6. 【ERROR】bash: vim: command not found的解决办法

    今天在学习鸟哥的菜的时候,发现自己linux不可以启用vim命令,错误为:bash: vim: command not found. 机器环境:VMWare8+RED HAT Enterprise5 ...

  7. Linux系统休眠和设备中断处理

    一.设备IRQ的suspend和resume 本小节主要解决这样一个问题:在系统休眠过程中,如何suspend设备中断(IRQ)?在从休眠中唤醒的过程中,如何resume设备IRQ? 一般而言,在系统 ...

  8. Linux内核同步 - spin_lock

    一.前言 在linux kernel的实现中,经常会遇到这样的场景:共享数据被中断上下文和进程上下文访问,该如何保护呢?如果只有进程上下文的访问,那么可以考虑使用semaphore或者mutex的锁机 ...

  9. unity 获得子节点

    transform.FindChild("childName") transform.FindChild("childName/grandChildName") ...

  10. nexus代理地址整理

    为给大家提供方便构建开源软件,分享下自己研究一些开源软件的时候,为方便构建搭建的nexus仓库以及代理地 名称 地址 apache-content-releases https://repositor ...