jQuery动态添加与管理DOM节点实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41029937/article/details/119606765
jquery动态添加节点

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    </head>
<body>
   <div class="qaItem">
	   <label class="col-sm-1 control-label" style="text-align: right">问： <input type="text"  class="form-control question" placeholder="请输入问题"></label>
	   <label class="col-sm-1 control-label" style="text-align: right">答： <input type="text" class="form-control answer" placeholder="请输入回答"></label>
	   <button type="button" onclick="addNode(this);" class="btn  btn-default-blue" ><i class="fa fa-plus-circle" ></i>+</button>
	   <button type="button"  name="sortBtn"  onclick="last(this);" class="btn  btn-default-blue" ><i class="fa fa-arrow-up" ></i>上移</button>
	   <button type="button"  name="sortBtn" onclick="next(this);"  class="btn  btn-default-blue" ><i class="fa fa-arrow-down" ></i>下移</button>
	    <button type="button"  onclick="delNode(this);" class="btn  btn-default-blue" ><i class="fa fa-minus-circle" ></i>-</button>
   </div>
   <div class="qaItem">
   	   <label class="col-sm-1 control-label" style="text-align: right">问： <input type="text"  class="form-control question" placeholder="请输入问题"></label>
   	   <label class="col-sm-1 control-label" style="text-align: right">答： <input type="text" class="form-control answer" placeholder="请输入回答"></label>
   	   <button type="button" onclick="addNode(this);" class="btn  btn-default-blue" ><i class="fa fa-plus-circle" ></i>+</button>
   	   <button type="button"  name="sortBtn"  onclick="last(this);" class="btn  btn-default-blue" ><i class="fa fa-arrow-up" ></i>上移</button>
   	   <button type="button"  name="sortBtn" onclick="next(this);"  class="btn  btn-default-blue" ><i class="fa fa-arrow-down" ></i>下移</button>
	   <button type="button"  onclick="delNode(this);" class="btn  btn-default-blue" ><i class="fa fa-minus-circle" ></i>-</button>
   </div>
    <button type="button"  onclick="getValue();" class="btn  btn-default-blue" >getValue</button>
	<div id="qaInfo"></div>
	<script type="text/javascript" src="jquery-3.1.1.js"> </script>
    <script>
		function getValue(){
			var question = new Array();
			var answer = new Array();
			$(".question").each(function (i,j){
				question[i]=$(this).val()
			});
			$(".answer").each(function (i,j){
				answer[i]=$(this).val()
			});
			var qaList = new Array();
			for (let i = 0; i < question.length; i++) {
				if (question[i] != ""){
					var qa = {"question":question[i],"answer":answer[i]};
					qaList.push(qa);
				}
			}
			$("#qaInfo").text(JSON.stringify(qaList));
			console.log(qaList);
		}
		function next(obj) {
	        var node = $(obj).parents(".qaItem");
	        var hasNext = node.next().html();
	        if (hasNext == undefined){
	            alert( "已经是最有一个啦");
	            return false;
	        }
	        node.next().after(node);
	    }
	    function last(obj) {
	        var node = $(obj).parents(".qaItem");
	        var hasNode= node.prev().html();
	        if (hasNode == undefined){
	            alert( "已经是第一个啦");
	            return false;
	        }
	        node.prev().before(node);
	    }
	    function addNode(obj) {
	        var node = $(obj).parents(".qaItem");
	        var cloneNode =  node.clone(true);
	        node.after(cloneNode);
			cloneNode.find("input").val('');
	    }
	    function delNode(obj) {
	        var node = $(obj).parents(".qaItem");
	        node.remove();
	    }
    </script> 
</body>
</html>