标签和Document对象

最新推荐文章于 2022-10-16 00:32:01 发布

zhangzongxing_

最新推荐文章于 2022-10-16 00:32:01 发布

阅读量182

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/zhangzongxing_/article/details/114777491

版权

javaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="myDiv">
			
			
		</div>
		<button  onclick="addInput()">点我</button>
	</body>
	<script>
		function addInput(){
			var div=document.getElementById(myDiv);
			 var ips=dcument.createElement("input");
			div.appendChild(ips);
		}
		
	</script>
</html>

在标签前加内容


```go
<script>
		function addInput(){
			var div=document.getElementById(myDiv);
			 var ips=document.createElement("input");
			div.appendChild(ips);
			document.createTextNode("用户名：");
			//向div中的input标签子节点前面加文本节点
			div.insertBefore(,ips);
			
			
		}
		
	</script>
	<body>
		<div id="myDiv">
			
			
		</div>
		<button  onclick="addInput()">点我</button>
	</body>

 2.**insertBefore()**
在指定标签 的子节点前面添加标签

 

##   Document

1. createAttribute

```go
var attr1=document,createAttribute("value");
			
			document.setAttribute(attr1,"张安");

SetAttribute
设定标签的值

var attr1=document,createAttribute("value");
			
			document.setAttribute(attr1,"张安");

目标节点：setAttribute(属性名,值);

方法

getElementById()
getElementsByName();
getElementsByTagName();
createElement(“标签名”); 创建一个标签名
createTextNode();创建一个文本节点

appendChild();向当前标签中，拼接一个子节点在标签内部

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=function(){
				
				var btn=document.getElementById("btn");
				var myDiv=document.getElementById("myDiv");
				btn.onclick=function(){
					
					
					var spn=document.createElement("span");//创建新元素
					myDiv.appendChild(spn);//拼接子节点 在div中
					
					apn.inneHTML="哈哈";
					
				}
				
				
				
			}
			
			
			
		</script>
		</head>
	<body>
		<div id="myDiv">
			
		</div>
		<button id="btn" >点我</button>
	</body>
</html>

document.insertBefore(text,input);
//向div中的input标签子节点前面放文本节点
在指定标签的子节点前面添加元素

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
				var btn=document.getElementById("btn");
				var myDiv=document.getElementById("myDiv");
				btn.onclick=function(){
					
					var input =document.createElement("input");
					myDiv=div.appendChild(input);
					
					var text=document.createTextNode("文本框");
					document.insertBefore(text,input);//向div中的input标签子节点前面放文本节点
				}
				
				
				
			
		
			
			
		</script>
		</head>
	<body>
		<div id="myDiv">
			
		</div>
		<button id="btn" >点我</button>
	</body>
</html>

zhangzongxing_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签和Document对象

标签appendChild点击按钮，div中添加节点<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv"> </div> <button onclick="addInput()">点我</button> &lt
复制链接

扫一扫