`

WEB innerHTML中div 和span

Web 
阅读更多
使用innerHTML属性来控制DIV和SPAN<$log_hiddenIcon$>
今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用innerHTML属性来控制层的值,这个innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。

  比如说我一个div层里本来没有值,我处罚一个事件后要显示值,那么就能够使用innerHTML属性了,其实innerHTML属性除了能控制层以外,还能控制窗口内容的所有元素,但是我没有测试过。

(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-outerHTML-innerTEXT.txt

    在这个例子中,`innerHTML` 返回了 `&lt;div id="test"&gt;` 元素中的所有 HTML 内容,包括 `&lt;span&gt;` 标签及其样式。 #### 使用场景 - 动态修改页面内容。 - 渲染数据到页面上,如展示用户评论等动态数据。 ### `...

    js打印WEB页面与打印预览

    JS打印WEB页面与打印预览是指在WEB页面中使用JavaScript语言来实现页面的打印和预览功能。以下是实现这个功能的三种方法: 第一种方法:使用CSS隐藏不打印内容 在这个方法中,我们可以使用CSS来隐藏不需要打印的...

    js打印WEB页面内容代码大全[整理].pdf

    函数会将指定ID的元素(如`div1`和`div2`)的innerHTML合并,并调用`window.print()`来启动打印操作。 HTML部分: ```html &lt;span id='div1'&gt;打印内容&lt;/span&gt; ()" target="_self"&gt;打印 ``` JavaScript部分: ...

    innerText和innerHTML 一些问题分析

    innerText 和 innerHTML 是在Web开发中用于操作HTML元素内文本内容的两个重要属性,它们各自具有独特的特性和用途。在JavaScript或DOM编程中,理解这两个属性的区别和应用场景至关重要。 innerText 属性主要用于...

    js+html+css实现鼠标移动div实例.docx

    4. HTML中的`SPAN`和`DIV`的区别,`SPAN`用于行内元素,而`DIV`用于块级元素。 5. 使用jQuery向`div`添加HTML文本内容的简便方法。 6. jQuery加载HTML页面到指定`div`的实现。 7. 避免在HTML中滥用`div`,以保持代码...

    javascript获取div的内容 精华篇

    在实际的Web开发中,考虑到浏览器兼容性和性能,开发者应当谨慎选择`innerText`或`innerHTML`。在需要获取纯文本内容且不关心HTML结构时,应优先考虑`innerText`或跨浏览器兼容的`textContent`。而当需要操作HTML...

    web简易电子时钟的设计与实现

    接着,我们需要在HTML中创建一个元素来显示时间,这通常是一个`&lt;div&gt;`或`&lt;span&gt;`元素。我们可以给这个元素一个ID,以便在JavaScript中轻松找到它。例如,我们可以定义一个id为"clock"的`&lt;div&gt;`: ```html &lt;div id=...

    js打印Web页面

    &lt;span id='div1'&gt;把要打印的内容放这里&lt;/span&gt; function printit(MyDiv) { if (confirm('确定打印吗?')) { var newstr = document.getElementById(MyDiv).innerHTML; var oldstr = document.body.innerHTML; ...

    javascript表单和事件PPT课件.pptx

    JavaScript是Web开发中不可或缺的一部分,尤其在处理表单和用户交互方面。在PPT课件中,主要讨论了两个核心概念:`innerHTML`属性和表单的验证。 `innerHTML`属性是JavaScript中用于操作HTML元素内容的一个关键特性...

    javascript appendChild,innerHTML,join性能比较代码

    实验通过让用户输入希望添加的span标签数量和需要显示的文本,然后分别调用 `AppendDiv()`、`InnerHTML()` 和 `Join()` 函数,并通过记录操作前后的时间差,来评估性能。结果显示,在添加大量元素到DOM时,使用 `...

    window.print打印指定div指定网页指定区域的方法

    如果只想打印页面中的某个特定div,可以将要打印的内容放入一个`&lt;span&gt;`或`&lt;div&gt;`标签中,然后编写一个JavaScript函数来提取并打印这些内容。以下是一个示例: ```html &lt;span id="div1"&gt;把要打印的内容放这里&lt;/span...

    Html+Css+js实现春节倒计时效果(移动端和PC端).rar

    &lt;div id="countdown"&gt;距离春节还有: &lt;span id="days"&gt;&lt;/span&gt;天&lt;span id="hours"&gt;&lt;/span&gt;小时&lt;span id="minutes"&gt;&lt;/span&gt;分钟&lt;span id="seconds"&gt;&lt;/span&gt;秒&lt;/div&gt; ``` 接着,CSS(Cascading Style Sheets)负责美化...

    web前端面试题4.doc

    【DOM操作】:修改`&lt;body&gt;`的`innerHTML`会替换整个页面内容,而修改`&lt;div&gt;`的`innerHTML`仅替换该`div`的内容。 【闭包】:闭包是一种功能强大的机制,它允许函数访问并操作其外部作用域的变量,即使在其外部作用...

    XML数据源对象DSO介绍.pptx

    XML数据源对象(DSO)是互联网技术中用于处理和展现XML数据的一种机制,特别是在早期Web开发中广泛使用。数据岛(Data Island)是DSO的核心概念,它是XML数据与HTML页面相结合的形式,使得XML数据可以直接在HTML文档...

    HTML特效

    还可以通过CSS3的过渡和动画属性来改进效果,或者引入Web Workers以减轻主线程的负担,提高性能。 总的来说,“HTML特效——黑客帝国效果”是将HTML、CSS与JavaScript结合起来创造动态视觉体验的一个实例,展示了...

    (完整word版)javascript试题及答案.doc

    在示例`&lt;span id="outer"&gt;&lt;span id="inner"&gt;text&lt;/span&gt;&lt;/span&gt;`中,`document.getElementById("outer").innerHTML`将返回`&lt;span id="inner"&gt;text&lt;/span&gt;`,`document.getElementById("inner").innerHTML`将返回`...

    用Div仿showModalDialog模式菜单的效果的代码

    &lt;div class="boxheader-text"&gt;&lt;span class="b"&gt;显示窗体&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="btnright"&gt; ('buy');"&gt;关闭"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modalbody"&gt; 希望能大家多多交流! &lt;/div&gt; &lt;/...

    知名体育网站倒计时代码(HTML CODE)

    2. `span`标签:分别用于显示年、月、日、小时、分钟和秒的数值。 例如: ```html &lt;div id="countdown"&gt; &lt;span id="years"&gt;&lt;/span&gt;年 &lt;span id="months"&gt;&lt;/span&gt;月 &lt;span id="days"&gt;&lt;/span&gt;天 &lt;span id="hours...

    关键字飘红

    5. **数据绑定和框架**:在现代Web开发中,很多项目会使用如React、Vue或Angular等前端框架。这些框架提供了数据绑定功能,可以轻松地根据数据变化更新视图,实现关键字飘红。 ```jsx import React from 'react'; ...

Global site tag (gtag.js) - Google Analytics