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. MSSQL-SQL SERVER还原与备份(导入与导出)

    备份: 使用Microsoft SQL Server Management Studio查询出想要的列和结果, 在结果处左上角点击, 软件会自动选中查询出的所有结果, 然后右键"将结果另存为 ...

  2. HDUOJ---2152

    Fruit Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  3. web实现QQ第三方登录 开放平台-web实现QQ第三方登录

    应用场景     web应用通过QQ登录授权实现第三方登录.   操作步骤     1  注册成为QQ互联平台开发者,http://connect.qq.com/     2  准备一个可访问的域名, ...

  4. 配置tomcat全局c3p0连接池

    由于项目中多个应用访问同一个数据库,并部署在同一个tomcat下面,所以没必要每个应用都配置连接池信息,这样可能导致数据库的资源分布不均,所以这种情况完全可以配置一个tomcat的全局连接池,所涉及应 ...

  5. [Creating an image format with an unknown type is an error] on cordova, ios 10

    在 iOS 10  调用 了 获取  相册的 可编辑 的  照片后,会出现 [Creating an image format with an unknown type is an error] 这个 ...

  6. SDL 2.0 API by Category

    Basics View information and functions related to... View the header Initialization and Shutdown SDL. ...

  7. .net/c# RabbitMQ 连接断开处理-断线重连（转载）

    Rabbitmq 官方给的NET consumer示例代码如下,但使用过程,会遇到connection断开的问题,一旦断开,这个代码就会报错,就会导致消费者或者生产者挂掉. 下图是生产者发送消息,我手 ...

  8. 以宽字符形式读整个文件的内容（wifstream的使用）

    // TestShlwAPI.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h" #include <iostream>using s ...

  9. byte[] 转Hex String

    一.一个字符串转byte数组怎么转? byte[] byteArray = String.getBytes(); 二.又想把生成的数组转回字符串怎么办? String covertString = n ...

  10. Cocos2d-x动画工具类

    1.此工具类的目的是为了方便运行动画.使用TexturePackerGUI工具能够导出plist文件和png图片,这里我演示样例图片叫bxjg.plist和bxjg.png ///////////// ...