js动态创建div点击后获取div中input的值

六月初六月初 JavaScipt 2024-07-30 21:21:05

在前端开发中js是不可缺少的组成部分，关于js的操作也应对项目需求而有所不同。

本篇文章就来介绍在项目中常见问题之一：动态创建div并获取input值。

代码详情：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container"></div>
		<div id="clickbut">点击</div>
		<script>
			var div = document.createElement('div');
			// 创建 <input> 元素
			var input = document.createElement('input');
			input.type = 'text';
			// 将 <input> 元素添加到 <div> 元素中
			div.appendChild(input);
			// 将 <div> 元素添加到文档中的某个容器元素中
			var container = document.getElementById('container');
			container.appendChild(div);
			
			var butClick = document.getElementById('clickbut');
			butClick.addEventListener('click', function() {
			  var inputValue = input.value;
			  console.log(inputValue);
			});
		</script>
	</body>
</html>

通过上方代码，即可实现原生js代码实现动态创建div并获取input值。

代码关键点解析：

    createElement：该方法动态创建HTML元素。如：在body区域创建一个按钮，显示为“点击一下”

var btn = document.createElement("button");
btn.innerHTML = "点击一下";
document.body.appendChild(btn);

    addEventListener：该方法用于向指定元素添加监听事件。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！