Add <img> and <input> tags below an existing input text in Javascript

Ti J 0
Viewed 26

I need to add img and input tags below an existing input. Below is my code:

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);
  
}

Existing HTML Code (before insert). This is where I need to insert the new img and input elements after the "break_sw".

<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;" scr="..//images/sample.gif">
            <input name="break_sw" id="create_sw" type="button" onclick="buttonClick()>
        </span>
    </td>
</tr>

The result of the above code is incorrect. The newly added img and input were inside the input text.

<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;" scr="..//images/sample.gif">
            <input name="break_sw" id="create_sw" type="button" onclick="buttonClick()>
                <img style="border:0px;height:1px;width:30px;" scr="..//images/sample.gif">
                <input id="new_input" name="new_input" style="padding-right: 5px;" onclick="buttonClick()" type="button">
            </input>
        </span>
    </td>
</tr>

MY DESIRED OUTPUT SHOULD BE:

<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;" scr="..//images/sample.gif">
            <input name="break_sw" id="create_sw" type="button" onclick="buttonClick()>
            <img style="border:0px;height:1px;width:30px;" scr="..//images/sample.gif">
            <input id="new_input" name="new_input" style="padding-right: 5px;" onclick="buttonClick()" type="button">
        </span>
    </td>
</tr>
dom javascript html
1 Answers

first thing that you are using same id "create_sw" twice which ilegal but also that is not the problem here:

breakSwInput.appendChild(imgTag); breakSwInput.appendChild(inputTag);

in this line first question is what is this "breakSwInpu" because you haven't defined it anywhere.

Whatever my suggestion is :

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

in above code give the span tag an id or class whatever you feel comfortable:

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

and now inside your function you can try these changes:

function addElements(){
 const appendHere = document.getElementById('appendHere');
 
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); instead of this
appendHere.append(imgTag); // do this

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); instead of this
appendHere.append(inputTag);// do this

appendHere.append(imgTag,inputTag); // or you can try this
}

try this and tell me if it works...

Dipesh Singh0
Related