使用方法：

比方在<body>中写了例如以下的代码：
<div id=top></div>

如今用top.innerHTML="..........";的方法就能够向这个id的位置写入HTML代码了。
比如top.innerHTML="<input type="button" name="我非常帅" value="说的对">";就能够在top相应的位置出现一个button了！

爽吧，在公告前加javascript即可老，直接改HTML。。。

<html>
<head>
<script>
function Test(){
        var str="";
        str+="Hello,";
        str+="This is a Test!<br />";
        str+="I Love you;<br />";
        str+="I Love you,too!";
        p.innerHTML=str+"<br /><br />"+Math.random();
        setTimeout('Test();',1000);
}
</script>
</head>
<body onload=Test();>
<span id="p"></span>
</doby>
</html>

innerHTML和innerText有什么作用？

用javascript能够控制显示一个HTML表单如text,textarea,等里面的文字，
如： document.all.表单ID.value="ABC";

但怎样控制在页面上显示的文字呢？

这时就要用到innerHTML或innerText

<div id="div1"></div><p>
<div id="div2"></div>

<script>
document.all.div2.innerText="<font color=#ff0000>AAA</font>"; //能够这样动态改动，纯文字格式
document.all.div1.innerHTML="<font color=#ff0000>AAA</font>"; //HTML格式，动态生成一个表格也行
</script>

（1）对div标签的控制

div标签跟span标签是不一样的，div是一个层的块，span是一行，我们以下看演示就知道差别了。先来看一段控制div的代码。

<script language="javascript">
function chageDiv(number)
{
 if (number == 1) {
  document.getElementById("div1").innerHTML = "值为1";
 }
 if (number == 2) {
  document.getElementById("div1").innerHTML = "值为2";
 }
}
</script>

DIV块測试：<div id="div1">默认值</div>

<a href="#" onClick="chageDiv(1)">改变值为1</a> 
<a href="#" onClick="chageDiv(2)">改变值为2</a>

执行的时候，点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”，可是注意当中的界面，就是会发现“DIV測试：”和“默认值”是两行显示的，由于DIV是按块来显示的。

（2）对span的控制

与div相似，可是它是依照行来显示的，看以下的代码：

function chageSpan(number)
{
 if (number == 1) {
  document.getElementById("span1").innerHTML = "值为1";
 }
 if (number == 2) {
  document.getElementById("span1").innerHTML = "值为2";
 }
}
</script>

Span行測试：

<span id="span1">默认值</span><br>
<a href="#" onClick="chageSpan(1)">改变值为1</a>
<a href="#" onClick="chageSpan(2)">改变值为2</a>

当点击“改变值为1”的时候，“默认值”将变为“值为1”，可是“Span行測试”和“默认值”是在同一行显示的，跟DIV不一样。

另外一个值得注意的就是，无论是div还是span，后面的名字都是以为id来定义的，不是象表单一样是使用name来定义的。

用innerHTML这样就能够实现动态table的效果：
<div id=div1></div>
<input type=button value=Test onclick=InsertHtml()>
<script language=JScript>
var strHTML = "<Table><Tr>";
strHTML += "<Td bgColor=#000000 Height=100px Width=100px>fadsf</Td>";
strHTML += "</Tr></Table>";
function InsertHtml()
{
document.all.div1.innerHTML = strHTML;
}
</script>

innerHTML使用方法的更多相关文章

  1. [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别

    清空元素html("").innerHTML="" 与 empty()的区别 一.清空元素的区别     1.错误做法一:           $(" ...

  2. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

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

  3. C#正则过滤HTML标签并保留指定标签的方法

    本文实例讲述了C#正则过滤html标签并保留指定标签的方法.分享给大家供大家参考,具体如下: 这边主要看到一个过滤的功能: public static string FilterHtmlTag(str ...

  4. Javascript，获取元素，write方法

    一:Javascript:弱类型脚本语言,是一种动态类型.实现部分动画效果和用户交互等 -- html是骨架(页面结构)  css样式  js是行为 -- 弱类型体现: JS代码可以写在body,he ...

  5. map方法，以及filter方法的使用

    map()方法,会返回一个 jQuery 封装的数组, 这个数组不能直接使用,需要使用 get() 来处理返回的对象以得到基础的数组. 例子: <!DOCTYPE html> <ht ...

  6. [JS][jQuery]清空元素html(&quot;&quot;)、innerHTML=&quot;&quot; 与 empty()的差别：关于内容泄露问题

    清空元素html("").innerHTML="" 与 empty()的差别 一.清空元素的差别      1.错误做法一:            $(&quo ...

  7. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  8. JS获取标签内容的方法

    JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

随机推荐

  1. Coreseek:indexer crashed神秘

    浩哥前两天让我再Coreseek该指数再次这样做,由于需求方面变化不大,公司名称应出现指数.在添加的配置文件的面孔sql_field_string:串场.. 此属性特别有用,因为它不仅作为过滤器的特性 ...

  2. 多线程之join方法

    join方法的功能就是使异步执行的线程变成同步执行.也就是说,当调用线程实例的start方法后,这个方法会立即返回,如果在调用start方法后后需要使用一个由这个线程计算得到的值,就必须使用join方 ...

  3. SQLServer2012 分页语句执行分析

    上一篇文章提到了,SQLServer2012在使用Offset,Fetch语句分页时,获取了大量不需要的数据,导致查询效率低的问题. 现在让我们来看看,究竟是什么导致SQLServer不能按需取数呢? ...

  4. Cocos2d-x3.1 粒子效果演示样例

    这里把粒子的几种效果粘出来,以便以后使用 原文地址:http://blog.csdn.net/qqmcy/article/details/37511259 // // IntervalLayer.cp ...

  5. VS2010 TFS

    在本文的两个部分中,我将介绍Team Foundation Server的一些核心特征,重点介绍在本产品的日常应用中是怎样将这些特性结合在一起使用的. 作为一名软件开发者,在我的职业生涯中,我常常会用 ...

  6. 数据结构 《18》----RMQ 与 LCA 的等价性 (一)

    前言     RMQ: 数组 a0, a1, a2,..., an-1, 中求随意区间 a[i+1], a[i+2], ..., a[i+k] 的最小值     LCA: 求二叉树中两个节点的最低公共 ...

  7. 手把手教popupWindow从下往上，以达到流行效果

    效果如图所看到的,点击開始button,popWindow从下往上出来,再点击popWindow外面,popWindow又从上往下消失 能够看出来,上面的popupWindow是半透明的,后面我会细说 ...

  8. UML相关工具一览

    http://www.cnblogs.com/chehaoj/p/3478003.html TopCoder UML Tool 1.2.6 TopCoder, Inc http://www.topco ...

  9. 使用MVC写模式jsp连接到数据库操作

    首先用一个JavaBean封装数据库操作,即mvc中的模型 JdbcBean.java package data; import java.sql.*; public class JdbcBean { ...

  10. Windows下一个AndroidStudio 正在使用Git(AndroidStudio工程GitHub关联)

    前提条件 : 1. 设备 Git client 下载链接 2. 有着 GitHub 账号 (假设你已经有了一些git基础, 假设还一点都不会, 请去找其它加成学习) AndroidStudio项目公布 ...