js中增加标签删除标签和input修改获取内容

拼搏现实的明天。 2022-04-23 04:26 307阅读 0赞

### 1、增加标签 ###

创建标签：document.createElement('标签id名')

在某一标签内的最后面插入标签：c.appendChild（b)；

//即给c加一个孩子b，记住这个孩子是后面进来的，所以在该标签内的最末位置

增加同级标签：c.parentsNode.insertBefore（b，c）；

//即在c的父级里面插入一个标签b，而且还是在c前面的；

实例代码：

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			.one{
    				background: red;
    			}
    		</style>
    	</head>
    	<body>
    		<button id="btn">按钮</button>
    		<script>
    			/*直接选择id名，可以选中标签*/
    			/*num用来计数,方便查看增加到第几个num*/
    			var num=0;
    			btn.onclick=function(){
    				// 创建标签 document.createElement('标签名')
    				var tag=document.createElement('h1');
    				num++;
    				// 增加内容
    				tag.innerHTML='新增的'+num
    				// 增加属性
    				tag.setAttribute('class','one')
    				// 追加标签  a.appendChild(b)  把b追加到a标签内部底部
    				// document.body.appendChild(tag)
    					document.body.appendChild(tag);
    				// 同级追加  c.parentNode.insertBefore(b,c) 把b标签追加到c同级之前。 
    				btn.parentNode.insertBefore(tag,btn)
    
    			}
    		</script>
    	</body>
    </html>

运行效果：

点击按钮前：

![2019012318564593.png][]

点击按钮后：

点一下，增加一条，并且，可以看到是插在按钮之前发的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70][]

###  2、删除标签 ###

删除标签：

c.parentNode.removeChild(c);

即c的父级删除孩子c；

示例代码：最下的那张图中的按钮就是来测验删除标签的

### 3、input修改内容 ###

input修改内容：

获取到的标签名.value=' 修改后的值';

### 4、input获取内容 ###

input获取内容：

获取到的标签名.value；

示例代码：

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    	</head>
    	<body>
    		<input type="text" id="txt">
    		<button id="btn">按钮</button>
    
    		<script>
    
    			// 删除标签  c.parentNode.removeChild(c)
    			btn.onclick=function(){
    				this.parentNode.removeChild(this);
    			}
    			txt.onfocus=function(){
    				// 聚焦 修改内容
    				this.value='';
    			}	
    			txt.onblur=function(){
    				// 失去焦点  获取内容
    				console.log(this.value);
    			}
    		</script>
    	</body>
    </html>

运行效果：

![20190123191225356.png][]

聚焦时：![20190123191334267.png][]

失去焦点时：![20190123191421468.png][]（获取到输入的内容）

当你重新聚焦时，内容又会变为空：

![20190123191657255.png][]

[2019012318564593.png]: /images/20220323/a6cf9211e4d641cdb3ee815f33efc0cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70]: /images/20220323/66eecf2a0c024fcdab34515097de62c3.png
[20190123191225356.png]: /images/20220323/ce19b28662e84bf99ee3f0e39e19271f.png
[20190123191334267.png]: /images/20220323/027f3e19784f43c48b19454ddeb60cf1.png
[20190123191421468.png]: /images/20220323/11677052e23145aabfc112d917b6c7aa.png
[20190123191657255.png]: /images/20220323/651b3b8cde2b42ecb713e3a10b689599.png