JS获取/修改文本框输入的内容value，修改div标签中的内容：innerHTML、innerTest

原创已于 2022-08-31 21:57:18 修改 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-08-31 13:55:05 首次发布

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用JavaScript操作网页中的DOM元素，包括获取和修改文本框输入的内容(value)，以及修改div标签的内容(innerHTML和innerText)的方法。innerHTML属性允许插入HTML代码，而innerText则仅支持纯文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS获取/修改文本框输入的内容value：

var a = document.getElementById("").value;//获取
document.getElementById("").value = 123;//修改

修改div标签中的内容：innerHTML、innerText：

document.getElementById("").innerHTML = 123;
document.getElementById("").innerText = 123;

区别：innerHTML属性会将属性值以html代码的方式输出到浏览器，也就是说innerHTML内可以传html代码。innerText属性是将属性值以纯文本方式输出到浏览器。

<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					// 设置div的内容
					// 第一步:获取div对象
					var divElt = document.getElementById("div1");
					// 第二步:使用innerHTML属性来设置元素内部的内容
					// divElt.innerHTML = "fjdkslajfkdlsajkfldsjaklfds";
					// divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
					divElt.innerText = "<font color='red'>用户名不能为空！</font>";
				}
			}
		</script>