JS中的innerHTML,value的区别

最新推荐文章于 2022-03-05 14:03:39 发布

chubosheng0951

最新推荐文章于 2022-03-05 14:03:39 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2881037/blog/728169

1.innerHTML:用来设置或获取位于对象起始和结束标签内的html,注意：innerHTML字母大小写

①.获取标签内的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function getinnerHtml(){
		  alert(document.getElementById("inner").innerHTML);
		}
	</script>
</head>
<body>
	<table border="1px">
		<tr id="inner">
			<td>jgugcd</td>
			<td>jdkjbb</td>
		</tr>
	</table>
	<br/><br/>
	<button onclick="getinnerHtml()">获取值</button>
</body>
</html>

②.设置标签内的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function getinnerHtml(){
		  alert(document.getElementById("inner").innerHTML="<h1>hellow word</h1>");
		}
	</script>
</head>
<body>
	<table border="1px">
		<tr id="inner">
			<td>jgugcd</td>
			<td>jdkjbb</td>
		</tr>
	</table>
	<br/><br/>
	<button onclick="getinnerHtml()">获取值</button>
</body>
</html>

2.value:属性可设置或返回选项的值。

①.获取值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function getvalue(){
			var a=document.getElementById("textname").value;
			alert(a);
		}
	</script>
</head>
<body>
	账户：<input id="textname" type="text"></input>
	密码：<input id="textpwd" type="text"></input>
	<button onclick="getvalue()">登录</button>
</body>
</html>

②.设置值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function getvalue(){
			var a=document.getElementById("textname").value;
			a="xis"
			alert(a);
		}
	</script>
</head>
<body>
	账户：<input id="textname" type="text"></input>
	密码：<input id="textpwd" type="text"></input>
	<button onclick="getvalue()">登录</button>
</body>
</html>

转载于:https://my.oschina.net/u/2881037/blog/728169