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. 利用Windows 2003系统中实现两个网段的路由

    利用Windows 2003系统中实现两个网段的路由 当一个局域网中存在两个以上网段时,分属于不同网段内的主机彼此互不可见.为了解决这个问 题,就必须在不同的网段之间设置路由器.如果花费上万元资金购买 ...

  2. 给你的博客加上“Fork me on Github”彩带(转)

    给你的博客加上“Fork me on Github”彩带 https://www.cnblogs.com/Leo_wl/p/3608794.html https://github.blog/2008- ...

  3. HDUOJ----(2064)汉诺塔III

    汉诺塔III Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  4. QQ网页链接打开本地QQ.exe原理

    一.观察现象 QQ推广上有相关文档 http://shang.qq.com/v3/widget.html 新建一个html,点击链接就会启动本地QQ. <html> <body> ...

  5. 【LeetCode】136. Single Number (4 solutions)

    Single Number Given an array of integers, every element appears twice except for one. Find that sing ...

  6. 用浏览器访问WCF

    在开发的时候,为客户端编写代码访问WCF的方式,我们应该比较熟悉,主要是添加一个代理,然后通过这个代理进行访问. 如果用浏览器访问WCF呢?(其实最终是想在JS里面访问)用浏览器访问.测试Web Se ...

  7. FreeSWITCH检测DTMF数据的方法

    一.RFC2833 1. 介绍: RFC2833为带内检测方式,通过RTP传输,由特殊的rtpPayloadType即TeleponeEvent来标示RFC2833数据包.同一个DTMF按键通常会对应 ...

  8. C# 获取方法内参数名称

    public partial class Main : Form { public Main() { foreach(var parameter in typeof(Main).GetMethod(& ...

  9. Unix lrzsz命令 上传本地文件到服务器 / 发送文件到客户端

    第三方教程:https://www.jb51.net/article/73690.htm 安装命令: $ yum install lrzsz 本地上传文件到服务器,如果是xshell,直接拖拽文件进入 ...

  10. CPD轮播广告库的简单算法

    在广告的领域中,有一种广告形式,采用的是CPD的售卖模式,为了对流量进行拆分,媒体方会对广告位进行轮播拆分.比如一个广告位,被拆成了10轮播,那么在广告主来预订广告位的时候,这个时候就可以告诉广告主, ...