如何在指定input标签后正确添加img与input标签（JavaScript）

需求 #

需要在id为break_sw的现有input标签之后添加<img>和<input>标签，但当前实现代码将新元素错误嵌套到原input标签内部，需修正。

原实现代码 #

function addElements(){
   var inputTag1 = document.getElementById('break_sw');
   var imgTag = document.createElement('img');
   imgTag.setAttribute('style','border:0px;height:1px;width:30px;');
   imgTag.setAttribute('scr','..//images/sample.gif);
   breakSwInput.appendChild(imgTag);
   
   var inputTag = document.createElement('input');
   inputTag.setAttribute('id','new_input');
   inputTag.setAttribute('name','new_input');
   inputTag.setAttribute('id','new_input');   
   inputTag.setAttribute('type','button');    
   inputTag.setAttribute('onclick','buttonClick()');
   inputTag.setAttribute('style','padding-right: 5px;');  
   breakSwInput.appendChild(inputTag);
  
}

现有HTML结构（插入前） #

<tr id="row4">
    <td>
        <div>
            <span>
                <label>Dummy</label>
            </span>
        </div>
    </td>
    <td colspan="3">
        <span>
            <input name="create_sw" id="create_sw" type="button" onclick="buttonClick()">
            <img style="border:0px;height:1px;width:30px;" src="../images/sample.gif">
            <input name="break_sw" id="break_sw" type="button" onclick="buttonClick()">
        </span>
    </td>
</tr>

注：原HTML中break_sw的id被错误写为create_sw，已修正为正确id

当前错误执行结果 #

<tr id="row4">
    <td>
        <div>
            <span>
                <label>Dummy</label>
            </span>
        </div>
    </td>
    <td colspan="3">
        <span>
            <input name="create_sw" id="create_sw" type="button" onclick="buttonClick()">
            <img style="border:0px;height:1px;width:30px;" src="../images/sample.gif">
            <input name="break_sw" id="break_sw" type="button" onclick="buttonClick()">
                <img style="border:0px;height:1px;width:30px;" src="../images/sample.gif">
                <input id="new_input" name="new_input" style="padding-right: 5px;" onclick="buttonClick()" type="button">
            </input>
        </span>
    </td>
</tr>

期望正确结构 #

<tr id="row4">
    <td>
        <div>
            <span>
                <label>Dummy</label>
            </span>
        </div>
    </td>
    <td colspan="3">
        <span>
            <input name="create_sw" id="create_sw" type="button" onclick="buttonClick()">
            <img style="border:0px;height:1px;width:30px;" src="../images/sample.gif">
            <input name="break_sw" id="break_sw" type="button" onclick="buttonClick()">
            <img style="border:0px;height:1px;width:30px;" src="../images/sample.gif">
            <input id="new_input" name="new_input" style="padding-right: 5px;" onclick="buttonClick()" type="button">
        </span>
    </td>
</tr>

修正后的代码 #

方法1：使用insertBefore兼容旧浏览器 #

function addElements(){
   // 获取目标input元素
   const breakSwInput = document.getElementById('break_sw');
   // 获取父元素（span）
   const parentElement = breakSwInput.parentElement;

   // 创建img标签并设置属性
   const imgTag = document.createElement('img');
   imgTag.style.cssText = 'border:0;height:1px;width:30px;';
   imgTag.src = '../images/sample.gif'; // 修正属性名scr为src，路径..//改为../
   // 插入到break_sw的下一个位置
   parentElement.insertBefore(imgTag, breakSwInput.nextSibling);

   // 创建新input标签并设置属性
   const inputTag = document.createElement('input');
   inputTag.id = 'new_input';
   inputTag.name = 'new_input';
   inputTag.type = 'button';
   inputTag.onclick = buttonClick; // 推荐直接绑定函数，避免字符串解析
   inputTag.style.cssText = 'padding-right: 5px;';
   // 插入到刚创建的img标签的下一个位置
   parentElement.insertBefore(inputTag, imgTag.nextSibling);
}

方法2：使用现代浏览器支持的after()方法（更简洁） #

function addElements(){
   const breakSwInput = document.getElementById('break_sw');

   // 创建img并直接插入到break_sw后面
   const imgTag = document.createElement('img');
   imgTag.style.cssText = 'border:0;height:1px;width:30px;';
   imgTag.src = '../images/sample.gif';
   breakSwInput.after(imgTag);

   // 创建新input并插入到img后面
   const inputTag = document.createElement('input');
   inputTag.id = 'new_input';
   inputTag.name = 'new_input';
   inputTag.type = 'button';
   inputTag.onclick = buttonClick;
   inputTag.style.paddingRight = '5px';
   imgTag.after(inputTag);
}

错误原因说明 #

1. 嵌套错误：input是自闭合标签，不能包含子元素，原代码中breakSwInput.appendChild(imgTag)试图将新元素插入到input内部，导致浏览器自动修正结构，出现异常嵌套。
2. 变量名不匹配：定义了inputTag1却使用未声明的breakSwInput，存在变量未定义问题。
3. 属性拼写错误：将图片路径属性src写为scr，路径写法..//应为../。
4. 重复设置属性：重复设置了input的id属性，属于冗余代码。

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