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

本文链接：https://blog.csdn.net/weixin_41544553/article/details/86615784

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>

运行效果：

点击按钮前：

点击按钮后：

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

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>

<!-- 
	修改表单元素的值：
	选择标签.value='修改之后的值'
	获取表单元素的值：
	选择标签.value

 -->

运行效果：