js动态插入标签代码(insertAdjacentHTML)

做网页时通过ajax请求获取到数据后，有的需要把数据拼接到带有各种标签的字符串中，拼接完字符串就需要把字符串动态添加到网页上的某个位置，举个🌰。

<div id='bigDiv'>
     <div id='contentDiv'></div>

</div>

页面中有个div的id为bigDiv,其中有个子标签div，其id为contentDiv.

$.ajax({
            type: "post",
            url: "${ctx}/workorder/getUserOrderInfo",
            data:{
                province:province,
                orderType:orderType
            },
            dataType:'json',
            success: function (data) {
                var htmlStr = "";
                var count = data.length;
                for(var i = 0; i< count; i++){
                    var user = data[i];
                    htmlStr +="<div id='"+user['email']+"' class='ry-box clearfix'>"+
                            "<div class='ry-img'><img src='${ctxNewFront}/images/user_img01.png' width='79' height='79' /></div>"+
                            "<div class='ry-cont'>"+
                            "<div class='ry-name'>"+user['userName']+"</div>"+
                            "<div class='ry-tag green'>"+user['count']+"</div>"+
                            "<div class='ry-tag rad'>"+user['undoneDelayCount']+"</div>"+
                            "<div class='jd-name'>当前接单："+user['currentOrder']+"</div>"+
                            "</div>"+
                            "</div></div>";
                }
                //清空
                //插入htmlStr
                $('#contentDiv').nextAll().remove();
                document.getElementById('contentDiv').insertAdjacentHTML('afterEnd',htmlStr);
            }
        })

上边做了一个ajax请求，在拿到数据后，通过for循环拼接了一个字符串htmlStr.现在我们需要把拼接的htmlStr放在contentDiv后，如图

此时我们可以调用insertAdjacentHTML()方法来插入，此方法有两个参数，第一个参数为位置，第二个参数为你想插入的内容字符串。

位置有四中类型：

afterBegin:在此标签开始之后、结束前。

afterEnd:在此标签结束之后。

beforeBegin:此标签开始之前。

beforeEnd:此标签结束之前。

现在这中状况我们有多种选择。

1.使用afterEnd,在contentDiv结束之后插入

document.getElementById('contentDiv').insertAdjacentHTML('afterEnd',htmlStr);

2.使用beforeEnd,在bigDiv结束之前插入

document.getElementById('bigDiv').insertAdjacentHTML('beforeEnd',htmlStr);

两种处理方式效果一样.

上边使用做了个清空操作，当再次请求数据时，之前添加的数据就需要清空，清空后再执行inert操作。

$('#contentDiv').nextAll().remove();

nextAll()是找到本身往后的同胞元素，调用.remove()方法进行删除。