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

页面中有个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 +="
     
      "+                            "
      
       
      
"+                            "
      
       "+                            "
       
        "+user['userName']+"
       
"+                            "
       
        "+user['count']+"
       
"+                            "
       
        "+user['undoneDelayCount']+"
       
"+                            "
       
        当前接单："+user['currentOrder']+"
       
"+                            "
      
"+                            "
     
";                }                //清空                //插入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()方法进行删除。