用法:
比如在<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用法精解 #### 一、InnerHtml简介及基本用法 `innerHTML`是HTML DOM(Document Object Model)的一个属性,用于获取或设置某个元素内的HTML内容。使用`innerHTML`,开发者可以直接操作HTML内容,从而...
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
innerHTML的简单应用
JavaScript 是一种广泛使用的脚本语言,它赋予网页以动态交互性,而 innerHTML 属性是 JavaScript 中非常重要的一个属性,用于获取或修改指定元素的 HTML 内容。这个属性被广泛用于动态地更新网页上的内容。 首先,...
上例中的test[removed]的值也就是“<span xss=removed>test1</span> test2 ”。... test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。 上例中的text.outerHTML的值也就是<div i
### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中,经常需要用到JavaScript来操作DOM元素,其中`innerHTML`和`innerText`是非常重要的属性,它们分别用于获取或设置元素内部的HTML内容和纯文本...
1. **innerHTML的基本用法**:如何通过`innerHTML`读取和修改元素的内容。例如,`element.innerHTML`返回元素的HTML,而`element.innerHTML = someHTMLString`则将元素内容替换为指定的HTML字符串。 2. **性能影响*...
在示例中,我们可以看到,innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容,而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...
这两个属性分别代表了不同的操作方式和应用场景,它们的基本用法和区别在开发中非常重要。通过实例分析,我们可以更清晰地理解其用法和技巧。 首先,让我们来理解`innerText`属性。`innerText`属性用于获取或设置...
我们可以编写 JavaScript 函数来演示这些属性的用法: ```javascript function showInnerHTML() { const div = document.getElementById('test'); alert(div.innerHTML); } function showInnerText() { const ...
HTML标签的innerHTML和value之间的用法的区别
...而对对象DH的改变用了innerHTML属性,它除了有innerText的作用外,还可改变对象DH内部的HTML语句,于是它把文本变成了“我姓肖!”,而且文本输出改成了斜体(<i></i>)并下加一条直线(<u><
在提供的压缩包文件 "innerHTML_outerHTML.htm" 中,很可能是通过实例展示了 `innerHTML` 和 `outerHTML` 的用法,可能包含了一些交互式的例子或者详细的解释。读者可以下载并查看这个文件,以更直观地理解这两个...
下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性用于获取或设置元素内部的HTML内容,包括所有子元素以及它们的HTML结构。当设置`innerHTML`时,它会删除当前元素的所有子...