在html文档中,如果要动态获取/设置div、p、span及input中内容,我们该怎么来操作呢?具体可以分成两类来实现,第一种对于文本框要使用value获取和设置它的内容;而对于div、p、span则要通过innerHTML进行设置。
一、前台html界面
二、后台代码
<body>
<input type="text" name="" id="username" />
<span id="computer">我是电脑</span>
<div class="a">
<p>I am student</p>
</div>
<button onclick="test();">测试</button>
<span id="result" style="color: red;"></span>
<script type="text/javascript">
function test(){
//1.获取文本框的值,设置到span中
/* var msg=document.getElementById("username").value;
document.getElementById("result").innerHTML=msg; */
//2.获取span的值,设置到span中
var computer=document.getElementById('computer').innerHTML;
document.getElementById("result").innerHTML=computer;
//3.获取div.p中的内容,设置到span中
var student=document.getElementsByTagName("p")[0].innerHTML;//0指的是获取的第一个p标签(getElementsByTagName获取的是一个数组)
document.getElementById("result").innerHTML=student;
}
</script>