使用方法：

比方在<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. Redis在win7上的安装与可视化应用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  2. java中由类名和方法名字符串实现其调用【反射机制】

    js里通过eval()函数,在知道某个方法名是可以实现调用该方法,那么在java里边又怎么实现的呢? java里边是通过反射机制来实现,代码如下: import java.lang.reflect.M ...

  3. Windows phone 8 学习笔记(9) 集成

    原文:Windows phone 8 学习笔记(9) 集成 本节整理了之前并没有提到的Windows phone 8 系统相关集成支持,包括选择器.锁定屏幕的.联系人的访问等.选择器列举了若干内置应用 ...

  4. 使用 angular directive 和 json 数据 D3 随着标签 donut chart演示样本

    使用angular resource载入中priorityData.json中间json数据,结合D3绘制甜甜圈图.执行index.html其结果见于图.: priorityData.json中jso ...

  5. App如何选择移动广告平台的开发者3 - 选择标准广告平台

    App开发公司.通常他们不能走品牌.要挑品牌的能力,我们将面临两大问题:业务团队.广告填充率.一系列的问题,以现金周期. 无线商务本才刚刚开始,大多数都是没有商业经验.产品.设计.运营.销售的人才都不 ...

  6. UVALive 3890 Most Distant Point from the Sea(凸包最大内接园)

    一个n个点的凸多边形,求多边形中离多边形边界最远的距离.实际上就是求凸包最大内接圆的半径. 利用半平面交求解,每次二分枚举半径d,然后将凸包每条边所代表的半平面沿其垂直单位法向量平移d,看所有平移后的 ...

  7. Python3.2官方文件翻译--课堂笔记和异常是阶级

    6.7备注 有时喜欢Pasca在"录"和C中"数据体"的数据类型很实用.集合一些数据项. 一个空类定义能够清楚地显示: class Employee: pass ...

  8. C#判断操作系统是32位还是64位(超简单)

    由于项目需要在64位和32位系统运行,需要判断当前系统是32位还是64位. 网上很多方法,但是都感觉不是很简洁,最后发现可以使用int的长度来判断:看代码 /// <summary>    ...

  9. C语言中的函数指针

    C语言中的函数指针 函数指针的概念:   函数指针是一个指向位于代码段的函数代码的指针. 函数指针的使用: #include<stdio.h> typedef struct (*fun_t ...

  10. 走进C的世界-那些年我们常犯的错---keyword相关

    近期一段时间參加一些面试,发现非常多细节的问题自己已经变得非常模糊了.对一些曾经常常遇到的错误.如今也说不出原因了. 而且在编码过程中也相同犯这些错误. 特别写一个博客来记录这些我们常常遇到的错误.自 ...