通过JQuery将内容添加到特定的HTML标签

debugcn 发表于 Dev

东阮

我想将输入字段和图像标签添加到特定的

这就是我所做的

<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()。我不知道应该是什么。请帮助我检查并解决此问题。谢谢！

穆罕默德·优素福

在使用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来同时保存输入和预览

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。