JavaScript中通过id获取标签元素的值和获取文本框的值

最新推荐文章于 2025-03-27 20:58:18 发布

TechVi

最新推荐文章于 2025-03-27 20:58:18 发布

阅读量2.2w

点赞数 4

本文链接：https://blog.youkuaiyun.com/suxiaohanqi/article/details/56677209

版权

form表单中有下面的代码：

<br>

<span id="namespan">username</span>

</form>

通过ID获取id值为username的文本框的方法为：

var username = document.getElementById("username").value;

通过id获取id值为namespan的标签的值的方法为：

var namespan = document.getElementById("namespan").innerHTML;

从以上可以看，文本框是通过value获取的值，标签是通过innerHTML获取的值；

同时，还可以通过innerHTML改变span的值：

var namespan = document.getElementById("namespan");

namespan.innerHTML="this is why we play";

那么span标签的值改变了，而且页面中显示的值也改变了

全部代码如下：
<html lang="en">
<head>
<script type="text/javascript">
   function checkForm(){
       var username = document.getElementById("username").value;
       var info = document.getElementById("info").innerHTML;
       var spaninfo = document.getElementById("namespan");
       alert(username);
       alert(info);
       alert(spaninfo.innerHTML);

        spaninfo.innerHTML="fuck you";
       alert(spaninfo.innerHTML);
   }
</script>
</head>
<body>
<form method="post" id="" action="">
   <table>
       <tr>
           <td><input type="text" id="username" name="username" /></td>
           <td><span id="namespan"></span></td>
       </tr>
       <tr>
           <td><p id="info">this is why we play</p></td>
       </tr>
   </table>
   <input type="button" value="click" οnclick="checkForm()"/>
</form>
</body>
</html>