js+Ajax学习——DOM获取和改变页面元素的值

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

我还没秃我还能学！

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

阅读量644

点赞数

分类专栏：笔记前端 ajax 文章标签： js ajax DOM

本文链接：https://blog.youkuaiyun.com/weixin_43068329/article/details/100659560

版权

笔记同时被 3 个专栏收录

16 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

ajax

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript和AJAX操作DOM，包括通过.getElementById获取双标记元素的.innerHTML，点击按钮改变标记值，以及从单标记中获取.value并将其放入双标记内展示。

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

获取双标记元素的值（.innerHTML）

var a=document.getElementById("aaa").innerHTML;

 <script>
    function aa() {
	    var a = document.getElementById("aaa").innerHTML;
	    alert(a);
     }
</script>

<div id="aaa">放假了</div>
<button onclick="aa()">点一下试试</button>

点击按钮，改变标记里的值

<script>
	function aa() {
		var a = document.getElementById("aaa").innerHTML="<h1>哈哈哈哈哈哈</h1>";
	}
</script>

<div id="aaa">放假了</div>
<button onclick="aa()">点一下试试</button>

获取单标记元素的值（.value)

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

<script>
	function aa() {
		var a = document.getElementById("aaa").value;
		alert(a);
	}
</script>

<input type="text" id="aaa"/>
<button onclick="aa()">点一下试试</button>

<script>
	function getuname() {
		var uname = document.getElementById("uname").value;
		alert(uname);
	}

	function setuname() {
		var uname = document.getElementById("uname").value = "输入用户名";
	}
</script>

		<input type="text" id="uname" />
		<button onclick="getuname()">获取</button>
		<button onclick="setuname()">设置</button>

单标记内容放到双标记里

var value = document.getElementById("uname").value;
document.getElementById("show").innerHTML="<h1>"+value+"</h1>";

<script>
	function getuname() {
		var value = document.getElementById("uname").value;
		document.getElementById("show").innerHTML="<h1>"+value+"</h1>";
	}
</script>

<input type="text" id="uname" />
<button onclick="getuname()">获取</button>
<div id="show"></div>