Add content to specific HTML tag by JQuery

Question

I want to add an input field and Image tag to a specific

This is what I have done

<button onclick="add_field()" class="btn btn-primary">ADD MORE IMAGES</button>
<form id="mainform" enctype="multipart/form-data">
<div class="row">
// it should goes here. However, it always out of <div> tag
</div>
</form>
<script>
    function add_field() {
        var x = document.getElementById("mainform");
        // create an input field to insert
        var new_field = document.createElement("input");

        var pos = x.childElementCount;

        // set input field data type to text
        new_field.setAttribute("type", "file");
        new_field.setAttribute("name", "filename[]");
        new_field.setAttribute("accept", "image/*");
        new_field.setAttribute("class", "form-control col-2");
        new_field.setAttribute("id", 'img'+pos)

        var preview = document.createElement("img");
        preview.setAttribute("src", "#");
        preview.setAttribute("id", 'preview-img'+pos);
        preview.setAttribute("height", "250px");
        preview.setAttribute("width", "250px");

        // insert element
        x.insertBefore(new_field, x.childNodes[27]);
        x.insertBefore(preview, x.childNodes[28]);

        $("form#mainform input[type='file']").change(function(){
            readURL(this);
        });
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                imgId = '#preview-'+$(input).attr('id');
                $(imgId).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
<script>

I want to make the input field and image tag in the same line but it not work. The reason comes from x.insertBefore(). I do not know what it should be. Please help me to check and fix this issue. Thank you!

Answer 1

While you're using jquery you can use $(x).find('.row').prepend(new_field); if you want to add to top or $(x).find('.row').append(new_field); if you want to add to bottom

^{I don't prefer to mix pure javascript with jquery .. so this is a jquery version of your code}

.row > div{
  margin : 20px;
  padding : 20px;
  background : #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="add_field()" class="btn btn-primary">ADD MORE IMAGES</button>
<form id="mainform" enctype="multipart/form-data">
<div class="row">

</div>
</form>
<script>
    function add_field() {
        var x = $("#mainform");
        var row_div = $("#mainform .row");
        var count = $("#mainform .row div").length; // get divs count
        
        // create an input field to insert
        var new_field = "<input type='file' name='filename[]' accept='image/*' class='form-control col-2' id='img"+count+"'/>"
        
        // preview
        var preview = "<img src='#' id='preview-img"+count+"' height='250px' width='250px'>";

        // insert element
        row_div.prepend('<div>'+ preview + new_field +'</div>');

        $("form#mainform input[type='file']").change(function(){
            readURL(this);
        });
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                imgId = '#preview-'+$(input).attr('id');
                $(imgId).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

Note: .prepend('<div>'+ preview + new_field +'</div>'); here I create a div to hold both input and preview