使用方法：

比方在<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. Windows Phone开发（44）：推送通知第二集——磁贴通知

    原文:Windows Phone开发(44):推送通知第二集--磁贴通知 前面我们说了第一个类型--Toast通知,这玩意儿不知大家是不是觉得很新鲜,以前玩.NET编程应该没接触过吧? 其实这东西绝对 ...

  2. HDU 4982 Goffi and Squary Partition（推理）

    HDU 4982 Goffi and Squary Partition 思路:直接从全然平方数往下找,然后推断是否能构造出该全然平方数,假设能够就是yes,假设都不行就是no.注意构造时候的推断,因为 ...

  3. 【Hibernate步步为营】--双向关联一对一映射具体解释（一）

    一对一的映射在对象模型中是常常见到的,为了将对象模型转换为关系模型就必须在映射文件里进行配置,上篇文章讨论了一对一映射的单向关联的情况,重点是<one-to-one>标签的使用,须要在映射 ...

  4. LoadImage()使用

    该系统被定义: WINUSERAPIHANDLEWINAPILoadImageA(    HINSTANCE,    LPCSTR,    UINT,    int,    int,    UINT) ...

  5. Django操作model时刻，一个错误：AttributeError:’ProgrammingError’ object has no attribute ‘__traceback__’

    原因:在Django项目下对应的应用以下的models.py配置的model(也就是class)没有创建成对应的表. 这是怎么回事呢? 首先,将models.py里面的model创建成相应的数据库表的 ...

  6. Java Metrics

    Java Metrics Java Metrics是一个功能比較强大的java统计库,它的输出组件也非常强大,帮我们做好了: 输出到Ganglia 输出到控制台 输出到JMX 输出Json 具体见:d ...

  7. 【转】Android Web Server

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://vaero.blog.51cto.com/4350852/1188602 Andr ...

  8. UVA 11248 - Frequency Hopping（网络流量）

    UVA 11248 - Frequency Hopping 题目链接 题意:给定一个网络,如今须要从1到N运输流量C,问是否可能,假设可能输出可能,假设不可能,再问能否通过扩大一条边的容量使得可能,假 ...

  9. 主机Window不能访问该虚拟机Linux Samba文件服务提供了一个文件夹

    我最近遇到一个问题.虚拟机Linux中间Samba服务常开.主办"\\192.168.229.200" (我的虚拟机Linux址)訪问不了Share文件夹(/var/test),并 ...

  10. WPF 绑定

    WPF里分三种Binding:Binding, PriorityBinding, MultiBinding,这三种Binding的基类都是BindingBase,而BindingBase又继承于Mar ...