使用方法：

比方在<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. hdu3886（数位dp）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3886 题意:给一定区间[A,B],一串由/,\,-组成的符号串.求满足符号串的数字个数. •/表示数字 ...

  2. Android的PackageManager的使用

    Android系统提供了很多服务管理的类,包括ActivityManager.PowerManager(电源管理).AudioManager(音频管理)以及PackageManager管理类.Pack ...

  3. excel删除问号~?~

    1.直接替换(菜单)编辑——替换——查找内容——(输入)~?~——替换为(空,就是什么都不输入)——全部替换.2.设原数据在A列,从A1开始,若得到的数值数据需要参与计算,则在B1输入=--LEFT( ...

  4. a标签的背景图在ie8下不显示的问题

    突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另 ...

  5. 用java读写properties文件的代码

    package com.LY; import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.F ...

  6. 21天教你学会C++

  7. 主要的核心思想是取cookie然后发查询请求，不需要浏览器做代理（转）

    需求是催生项目和推进项目的不竭动力. 背景: 最近,因为媳妇要做个B超检查,想着去大医院查查应该更放心,所以就把目标瞄准在A医院.早已耳闻A院一号难求万人空巷,所以把所有能接触到的机会都看了一遍,线下 ...

  8. CentOS 6.4 文件夹打开方式

    CentOS 6.4 文件夹打开方式 在CentOS 6.4中,双击文件夹,默认会在新窗口中打开文件夹,没有路径.前进.后退这样的按钮,如果一个文件夹的路径很深,则需要打开n多的窗口才能找到最终想要的 ...

  9. SQL SERVER IN参数化处理

    方法一. CREATE TABLE [dbo].[Users] ( Id INTEGER IDENTITY(1, 1) PRIMARY KEY , Name NVARCHAR(50) NOT NULL ...

  10. 第三章 AOP 基于@AspectJ的AOP

    在前面,我们分别使用Pointcut.Advice.Advisor接口来描述切点.增强.切面.而现在我们使用@AdpectJ注解来描述. 在下面的例子中,我们是使用Spring自动扫描和管理Bean. ...