Question

我正在尝试从DIV元素中删除图像，并使用下面的代码将其替换为不同的图像，但这对我来说并不适用。什么都没发生。

 xmlhttp2.onreadystatechange = function(){
        if(xmlhttp2.readyState == 4 && xmlhttp.status == 200){
            // DISPLAY CROPPED IMAGE
            var json2_obj = JSON.parse(xmlhttp2.responseText);
            var img_path = json2_obj.avatar_path;

            var img_crop = document.createElement('img');
            img_crop.setAttribute('src', img_path);

            // ATTACH IMG TO HTML ELEMENT
            var hook_img = document.getElementById('cropped_image');
            if(hook_img.hasChildNodes()){
            console.log('BEFORE has child: '+ hook_img.hasChildNodes());
            // If hook_img has childnodes, remove all.


            hook_img.removeChild(hook_img.firstChild);
            hook_img.appendChild(img_crop);



            }else{
                console.log('has child: '+ hook_img.hasChildNodes());
                hook_img.appendChild(img_crop);
                 }

使用＆＃39; removechild＆＃39;仅代码（并且不需要重新附加替换子节点）我可以删除图像。但是，使用代码的两行不会导致任何无法发生的事情

hook_img只有一个孩子。我想我需要添加一个eventListener来删除第一个孩子才能添加替换孩子，但我不知道这个事件会是什么。

我尝试过使用回调函数，但是也没有用：

 function clearChildNodes(parentNode, childNode, callback){

            parentNode.removeChild(parentNode.firstChild);
            callback(parentNode, childNode);

        }

 function addChildNode(parentNode, childNode){
            parentNode.appendChild(childNode);
        }

Answer 1

问题可能是，有一个非元素子项作为第一个子项，如文本节点，所以尝试

hook_img.removeChild(hook_img.firstElementChild);//supported in ie 9+
hook_img.appendChild(img_crop);

如何确定Image DOM的第一个

1 个答案: