javascript获取节点；对节点的增加删除操作练习_js请尝试获取指定节点并修改练习:-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49014420/article/details/134102593

通过该案列可以加深对节点操作的理解，使得节点操作更加得心应手，虽然案列简单，不过细节很多，对节点的操作也更加得心应手。

页面效果：

源代码：

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: rgb(230, 116, 39);
    }
	h5{
		font-weight: normal;
		text-align: center;
		color: rgb(84, 76, 76);
	}
	span{
		color: rgb(84, 76, 76);
    display: inline-block;
	}
	button{
		border: none;
		color: rgb(84, 76, 76);
		height: 30px;
		width: 80px;
		background-color: rgb(255, 85, 0);
		border-radius: 5px;
	}
    .Box{
    height: 400px;
    width: 250px;
	  margin: 0 auto;
	  line-height: 40px;
    }
	.add{
		height: 100px;
		width: 100%;
		border-radius: 10px;
		background-color: rgb(230, 230, 230);
    overflow: hidden;
	}
	.Name>button{
		float: right;
	}
  </style>
</head>
<body>
  <div class="Box">
    <h5>添加删除文本</h5>
    <!-- 添加元素的框框 -->
    <div class="add"></div>
    <div>
      <button class="qu" onclick="qing()">全部清除</button>
    </div>
    <div class="Name">
      <span>张三</span>
      <button onclick="apend(this)">添加</button>
    </div>
    <div class="Name">
      <span>李四</span>
      <button onclick="apend(this)">添加</button>
    </div>
    <div class="Name">
      <span>王五</span>
      <button onclick="apend(this)">添加</button>
    </div>
    <div class="Name">
      <span>小张</span>
      <button onclick="apend(this)">添加</button>
    </div>
    <div class="Name">
      <span>小李</span>
      <button onclick="apend(this)">添加</button>
    </div>
  </div>
  <script type="text/javascript">
  	let qu=document.getElementsByClassName("qu")[0];//清除按钮
	let add=document.getElementsByClassName("Name");//获取所有添加按钮
	let Text=document.getElementsByClassName("add")[0];//获取文本框
	function apend(on){
    //向框框添加元素被克隆的span元素
		let Fu= Text.appendChild(on.previousElementSibling.cloneNode(true))
    //设置被添加的的span元素的样式
		Fu.style.height="30px"
		Fu.style.width="60px"
		Fu.style.background="rgb(255, 85, 0)"
		Fu.style.color="rgb(84, 76, 76)"
		Fu.style.borderRadius="5px"
		Fu.style.marginLeft="5px"
    //点击页面上元素的时候移除它
		Fu.onclick=function(){
			Fu.outerHTML=""
		}
	}
  //全部清除按钮
	function qing(){
		Text.innerHTML="";
	}