js createElement()，setAttribute()用法

最新推荐文章于 2025-04-29 23:38:30 发布

pkqk

最新推荐文章于 2025-04-29 23:38:30 发布

阅读量4k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/wu118765783/article/details/120363906

版权

大家好，我是pkqk,今天给大家讲解先js createElement()用法，直接上代码看效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	//所有主要浏览器都支持 createElement() 方法
	var btn=document.createElement("button");
	var btn1=document.createElement('button');
	//显示到body页面
	document.body.appendChild(btn);
	document.body.appendChild(btn1);
</script>

createElement()括号里面只能有一个元素用引号括起来，因为javascript是动态代码，自由度很高，推荐用双引号，结束用分号。createElement()返回值是括号里面的元素节点。

js setAttribute()用法，直接上代码看效果。

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 通过对比来显示setAttribute()用法 -->
		<!-- input的type默认是text -->
		<div>
		<input/>
		<input id="inputs"/>
		<input/>
		</div>
		<!-- 要更改的input -->
		<input/>
		
	</body>
</html>

js代码


<script type="text/javascript">
    //所有主要浏览器都支持 setAttribute() 方法
	//getElementsByTagName("input")[0]获取html页面第1个input元素节点。
	//getElementsByTagName("input")[1]获取html页面第2个input元素节点。
	/* 注意getElementsByTagName("input")是获取html页面全部的input元素，
	获取顺序是从上到下，不按照父级对子级的优先关系。 */
	/* setAttribute("type","button")添加属性与类型
	，也可以添加属性与属性值，比如宽或高 */
	document.getElementsByTagName("input")[3].setAttribute("type","button");
	//也可以直接通过id来添加样式。
	document.getElementById("inputs").setAttribute("type","button");
</script>

setAttribute()括号里面第一个值是属性，第二个值是属性值用引号括起来，用逗号分开。

感谢大家的观看！