如何解决insertBefore处理jQuery AJAX返回HTML时的参数类型报错

报错由两个问题共同导致：

• 方法名拼写错误：代码中写的inserBefore遗漏了字母t，原生DOM的正确方法名是insertBefore
• 核心类型错误：jQuery AJAX成功回调拿到的data是服务端返回的HTML字符串，而原生insertBefore、appendChild方法的第一个参数要求必须是Node类型的DOM节点对象，直接传入字符串会触发类型错误。jQuery的prepend()、append()方法内部封装了字符串转DOM节点的逻辑，因此可以直接传入HTML字符串正常运行。

方案1：使用原生insertAdjacentHTML（最简便，和jQuery效果完全对齐） #

insertAdjacentHTML是原生提供的专门用于插入HTML字符串的API，不需要手动做字符串到DOM节点的转换，性能更好、代码更简洁。
它支持4个插入位置，完全覆盖prepend、append等常见场景：

• afterbegin：插入到父元素内部的最开头，等价于jQuery的prepend()
• beforeend：插入到父元素内部的最末尾，等价于jQuery的append()
• beforebegin：插入到父元素本身的前面
• afterend：插入到父元素本身的后面

对应实现prepend效果的完整代码：

var parent_elem = document.getElementById('parent_elem');
$.ajax({
    type:'POST',
    url:'example.com/my_ajax_call',
    data: {"my_data":my_data},
    success:function(data){
        parent_elem.insertAdjacentHTML('afterbegin', data);
    },
    fail:function(data){
        console.log(data);
        console.log('failed to load page');
    }
});

方案2：手动解析HTML为DOM节点后调用insertBefore/appendChild #

如果你一定要使用insertBefore或appendChild方法，需要先把返回的HTML字符串解析为原生DOM节点再插入，注意要兼容返回内容包含多个顶级节点的情况：

var parent_elem = document.getElementById('parent_elem');
$.ajax({
    type:'POST',
    url:'example.com/my_ajax_call',
    data: {"my_data":my_data},
    success:function(data){
        // 创建临时容器承载解析后的DOM
        const tempWrap = document.createElement('div');
        tempWrap.innerHTML = data.trim();
        // 循环插入所有子节点，避免多顶级节点丢失内容
        while(tempWrap.firstChild) {
            // 实现prepend效果：插入到第一个子节点前
            parent_elem.insertBefore(tempWrap.firstChild, parent_elem.firstChild);
            
            // 实现append效果就替换成下面这行
            // parent_elem.appendChild(tempWrap.firstChild);
        }
    },
    fail:function(data){
        console.log(data);
        console.log('failed to load page');
    }
});

内容的提问来源于stack exchange，提问作者Kolektador