使用方法：

比方在<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. Nginx使用ngx_zeromq模块返回502错误的解决方法

    /*********************************************************************  * Author  : Samson  * Date   ...

  2. SWT中的GridLayout（转）例子不错

    GridLayout 是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout 有两个构造函数. GridLayout的构造函数 ...

  3. java性能缓慢

    虚拟帝国上面有很多营销软件是JAVA开发的!创业公司通常选择开源技术减少项目管理费用. 除了使用Java编程语言,创业公司也可以利用Java开发工具包的好处(JDK),Java运行时环境(JRE)和J ...

  4. pygame系列_font游戏字体

    在pygame游戏开发中,一个友好的UI中,漂亮的字体是少不了的 今天就给大伙带来有关pygame中字体的一些介绍说明 首先我们得判断一下我们的pygame中有没有font这个模块 1 if not ...

  5. c#和UDP SOCKET广播

    server:  Socket sock = new Socket(AddressFamily.InterNetwork, SocketType.Dgram,ProtocolType.Udp); // ...

  6. [WPF]Binding的Converter和Validator

    不拘一格用数据的Converter 上篇文已经说明,Binding就是数据源与目标之间的“关联”.大多数情况下,数据从Source到Target以及从Target返回Source都是“直来直去”的,但 ...

  7. [背景分离] 识别移动物体基于高斯混合 MOG

    使用很easy,  frame 就是当前帧,  foreground 是取得的, binary 型背景, 0.03是学习速率能够依据实际调整. cv::BackgroundSubtractorMOG ...

  8. Oracle数据库的锁类型

    Oracle数据库的锁类型 博客分类: oracle   Oracle数据库的锁类型 根据保护的对象不同,Oracle数据库锁可以分为以下几大类:DML锁(data   locks,数据锁),用于保护 ...

  9. gitLab添加ssh key

    电脑新装了一台虚拟机,想要和gitLab建立一个安全的ssh连接,步骤如下 1.本机生成ssh key 系统环境:Linux 使用root用户登录,执行命令:ssh-keygen -t rsa -C ...

  10. Solr入门指南

    本文转自http://chuanliang2007.spaces.live.com/blog/cns!E5B7AB2851A4C9D2!499.entry?wa=wsignin1.0 因为搜索引擎功能 ...