javascript onclick 事件添加 html 元素

📌 相关文章

📜 javascript onclick 事件添加 html 元素 - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:06.255000 🧑 作者: Mango

在开发网页的过程中经常需要动态添加或更新页面上的HTML元素。这时候javascript onclick 事件是一种非常方便的方法。

基本的 onclick 事件

下面是一个基本的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onclick Event to Add HTML Elements</title>
</head>
<body>
	<h2>JavaScript onclick Event to Add HTML Elements</h2>
	<button onclick="addText()">Add Text</button>
	<p id="text"></p>
	<script>
		function addText() {
			document.getElementById("text").innerHTML = "Hello, world!";
		}
	</script>
</body>
</html>

这里有一个 button 元素，该元素上绑定了 onclick 事件。当按钮被点击时，addText 函数会被调用。该函数会找到一个在 HTML 页面中标识为 text 的元素，并更新该元素的 innerHTML。

动态添加 HTML 元素

在上面的例子中，我们使用了 innerHTML 属性来更新元素的内容。我们同样可以使用 createElement 来动态创建新的 HTML 元素。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onclick Event to Add HTML Elements</title>
</head>
<body>
	<h2>JavaScript onclick Event to Add HTML Elements</h2>
	<button onclick="addText()">Add Text</button>
	<p id="text"></p>
	<button onclick="addDiv()">Add Div</button>
	<script>
		function addText() {
			document.getElementById("text").innerHTML = "Hello, world!";
		}

		function addDiv() {
			var div = document.createElement("div");
			div.innerHTML = "This is a new div.";
			document.body.appendChild(div);
		}
	</script>
</body>
</html>

这里添加了一个新的按钮，当被点击时会调用 addDiv 函数。该函数会创建一个 div 元素，并将其添加到 HTML 页面的 body 内。该 div 元素的 innerHTML 设置为 "This is a new div."。

总结

通过使用 onclick 事件和 createElement 方法，我们可以方便地动态添加或更新 HTML 元素。这为我们设计具有动态交互的网页提供了非常方便的工具。

以上是关于javascript onclick 事件添加 html 元素的介绍。