关于js改变img文件名实现图片变化

想实现输入内容格式检验，错误和正确有不同的反馈形式
通过js改变img的src来完成图片的变化

window.onload = function () {
    var phone = document.getElementById('phone');
    var phone_text = document.getElementById('phone_text');
    var photo = document.querySelector('#phone_photo');
    phone.onblur = function () {
        var content = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
        if (content.test(this.value)) {
            photo.src = 'images/电商-注册2_07.png';
            phone_text.innerHTML = '输入正确';
            phone_text.style.color = 'green';
        }
        else {
            photo.src = "images/电商-注册_03.png";
            phone_text.innerHTML = '手机号码格式错误';
            phone_text.style.color = 'red';
        }
    }
}

当我html为

<span id="phone_text">
    <img src="" alt="" id="phone_photo">
</span>

js改变不了图片地址，图片也显示不出来。

但当我html为

<img src="" alt="" id="phone_photo">
<span id="phone_text"></span>

该功能就能实现

这是什么问题

你这应该是innerHTML属性搞得，设置这个属性会覆盖原来的结构，嵌套的话，img标签会被js生成的文字覆盖，应该是这个问题