通過 JQuery 將內容添加到特定的 HTML 標簽

Question

我想將輸入字段和圖像標簽添加到特定的

這就是我所做的

<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>

我想將輸入字段和圖像標簽放在同一行，但它不起作用。 原因來自x.insertBefore() 。 我不知道它應該是什么。 請幫助我檢查並解決此問題。 謝謝！

Answer 1

當您使用 jquery 時，您可以使用$(x).find('.row').prepend(new_field); 如果要添加到頂部或$(x).find('.row').append(new_field); 如果你想添加到底部

^{我不喜歡將純 javascript 與 jquery 混合使用。所以這是您的代碼的 jquery 版本}

 .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>

注意： .prepend('<div>'+ preview + new_field +'</div>'); 在這里我創建了一個 div 來保存輸入和預覽