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. PAT 1086 Tree Traversals Again

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

  2. android中完全退出当前应用程序的四种方法

    Android程序有很多Activity,比如说主窗口A,调用了子窗口B,如果在B中直接finish(), 接下里显示的是A.在B中如何关闭整个Android应用程序呢?本人总结了几种比较简单的实现方 ...

  3. Linux命令-终止进程命令：killall

    强制杀死所有进程,注意它后面跟着是进程名而不是进程号 killall - httpd 杀死apache所有进程pstree -p | grep httpd 查看apache进程就没有了service ...

  4. Python学习笔记014——生成器Generator

    1 生成器定义 在Python中,一边循环一边计算的机制,称之为生成器(generator). 生成器是一个迭代器. 含有yield语句的函数是生成器函数,该函数被调用时返回一个生成器对象(yield ...

  5. Java 异常模型综述

    一. 异常的引入及基础 发现错误的理想时机是在编译阶段.也就是在你试图运行程序之前. 然而,编译期间编译器并不能找出全部的错误,余下的错误仅仅有在运行期才干发现和解决,这类错误就是 Throwable ...

  6. python dataframe 在merge时 产生笛卡尔积

    在pandas中,concat, merge, join的使用方法可以参考以下资料: http://blog.csdn.net/stevenkwong/article/details/52528616 ...

  7. ubuntu安装chrome浏览器

    PPA方法,免FQ,否则,你得FQ下载chrome,你Firefox VPN配置好了吗!!! wget -q -O - https://raw.githubusercontent.com/longhr ...

  8. 清除sqlserver日志方法（不适合always on）

    清除sqlserver日志方法 --查看数据库的recovery_model_desc类型 SELECT NAME, recovery_model_desc FROM sys.databases -- ...

  9. 使用.net的跟踪诊断来记录wcf消息

    首先在项目的config文件中定义以下结点: <system.diagnostics> <sources> <source name="System.Servi ...

  10. Shiro整合SSH开发3：配置Shiro认证后页面地址跳转问题（和详述不配置须要注意的问题）

         在视频教程中讲请求认证成功后跳转页面的问题是一笔带过的,可是我认为有必要单独写一篇相应的文章进行叙述.      我用了SSH来整合Shiro,在开发后验证的过程中,每次登陆后Shiro都会 ...