logo标签列表

如何使用JavaScript / jQuery填充div元素

javascriptjqueryhtmldom
3

我有一个用于显示MYSQL数据的代码。我可以使用innerHTML填充div，但是当我使用+=时，它会将数组中的所有值连接在一起。但是我需要在div中创建新元素。我应该如何实现呢？

jQuery(document).ready( function() {
$(".dropdown-item").click( function() {
    var data = { action: 'get_data',
      id: $(this).attr('id')
      };
      var parent= document.getElementById('info-block bg-grey m-b-2 p-a');
      var name = document.getElementsByClassName('h4 underline-sm')[0];
      var job = document.getElementsByClassName('m-b-1')[3];
      var phone=document.getElementsByClassName('m-b-0')[6];
      var image= document.getElementsByClassName('col-sm-4 text-xs-right m-b-1')[0];
   jQuery.ajax({
        cache: false,
        url: '/wp-admin/admin-ajax.php',
        data: data,
        dataType:'JSON',
        method: 'POST',
           success: function(response) {
            $.each(response, function(key, value){

            //

            name.innerHTML=response[key].firstname + ' ' + response[key].lastname;
            job.innerHTML ='<b>' + $.trim(response[key].job_title)  + ' <br>Tööruum: ' + $.trim(response[key].room) + '<br/><a href="mailto:' +  $.trim(response[key].email) + '>"' + $.trim(response[key].email)+ '</a></b>' ;
            phone.innerHTML=$.trim(response[key].phone) + ' ' + $.trim(response[key].cell_phone);
            image.innerHTML='<img src="'+ $.trim(response[key].image) +'" class="rounded-circle lg" alt="">';

                           });

        }  
   });
});
});

我将添加一个div，以展示我需要使用循环填充和创建的div。
<div class="info-block bg-grey m-b-2 p-a-2">  <!--parent div-->
                    <h4 class="h4 underline-sm">  </h4>   <!--response[key].firstname+ ' ' response[key].lastname-->
                    <div class="col-sm-8 text-xs-left">
                        <p class="m-b-1"></p> <!--'<b>' + $.trim(response[key].job_title)  + ' <br>Tööruum: ' + $.trim(response[key].room) + '<br/><a href="mailto:' +  $.trim(response[key].email) + '>"' + $.trim(response[key].email)+ '</a></b>' -->
                        <p class="m-b-0"></p> <!--response[key].phone + ' ' + response[key].cell_phone-->
                    </div>
                    <div class=" col-sm-4 text-xs-right m-b-1">
                        <img src="" class="rounded-circle lg" alt="">  <!--to src response[key].image-->
                    </div>
                </div>

我不需要别人来完成工作，但希望有人能够解释如何使用createelement以及如何使用DOM元素将子div创建到父div中。

感谢大家花时间考虑我的问题。

3个回答
2
你可以使用jQuery的append函数来实现这一点，下面是一个快速示例：
$('.h4').append(response[key].firstname + ' ' + response[key].lastname);

或者

$('.underline-sm').append(response[key].firstname + ' ' + response[key].lastname);
它不起作用，什么也不做。如果我执行 var name=$( document.getElementsByClassName('h4 underline-sm')[0])); 和 name.append(response[key].firstname + ' ' + response[key].lastname);，它仍然会将数组中的数据连接起来。 - Martin Tee
1

这是一个示例，首先创建一个id为“wrapper”的包装div，然后在变量中创建所需的html，并将其附加到包装器中。例如：

<div id="wrapper"></div> //this is your wrapper which holds all the html you want to insert

然后在js中。
var html =  `<div>
              <h2>`
               + $.trim(response[key].job_title) +
             `</h2>`
             `<p class="`+response[key].firstname+ `">`
               + $.trim(response[key].phone) +
             `<p>
            </div>`

$("#wrapper").append(html);

它将在包装器中添加所需的HTML。每个新的HTML都将附加在包装器内，但位于前一个HTML下方。希望这能给您一些想法。
0

我建议每次需要创建具有特定值的新div时，使用.clone()：

$.each(response, function(key, value){
   var clonedEle = $('.info-block.bg-grey.m-b-2.p-a-2').clone();
   clonedEle.find('.h4.underline-sm').text(value.firstname+ ' ' + value.lastname);
   ...........

您的最终代码将是：

jQuery(document).ready( function() {
    $(".dropdown-item").click(function() {
        var data = { action: 'get_data',
            id: $(this).attr('id')
        };
        jQuery.ajax({
            cache: false,
            url: '/wp-admin/admin-ajax.php',
            data: data,
            dataType:'JSON',
            method: 'POST',
            success: function(response) {
                $.each(response, function(key, value){
                    var clonedEle = $('.info-block.bg-grey.m-b-2.p-a-2').clone();
                    clonedEle.find('.h4.underline-sm').text(value.firstname+ ' ' + value.lastname);
                    clonedEle.find('.m-b-1').append('<b>' + $.trim(value.job_title)  + ' <br>Tööruum: ' +
                            $.trim(value.room) + '<br/><a href="mailto:' +  $.trim(value.email) + '>"' + $.trim(value.email)+ '</a></b>');
                    clonedEle.find('.m-b-0').text(value.phone + ' ' + value.cell_phone);
                    clonedEle.find('img.rounded-circle.lg').attr('src', value.image);
                    clonedEle.insertAfter('.info-block.bg-grey.m-b-2.p-a-2:first');
                });
            }
        })
    })
});


var response = [{firstname: 'firstname1', job_title: 'job_title', room: 'room', email: 'email', phone: 'phone', cell_phone: 'cell_phone', image: 'image'},
    {firstname: 'firstname2', job_title: 'job_title', room: 'room', email: 'email', phone: 'phone', cell_phone: 'cell_phone', image: 'image'}]

$.each(response, function(key, value){
   var clonedEle = $('.info-block.bg-grey.m-b-2.p-a-2').clone();
    clonedEle.find('.h4.underline-sm').text(value.firstname+ ' ' + value.lastname);
    clonedEle.find('.m-b-1').append('<b>' + $.trim(value.job_title)  + ' <br>Tööruum: ' +
            $.trim(value.room) + '<br/><a href="mailto:' +  $.trim(value.email) + '>"' + $.trim(value.email)+ '</a></b>');
    clonedEle.find('.m-b-0').text(value.phone + ' ' + value.cell_phone);
    clonedEle.find('img.rounded-circle.lg').attr('src', value.image);
    clonedEle.insertAfter('.info-block.bg-grey.m-b-2.p-a-2:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="info-block bg-grey m-b-2 p-a-2">  <!--parent div-->
    <h4 class="h4 underline-sm">  </h4>   <!--response[key].firstname+ ' ' response[key].lastname-->
    <div class="col-sm-8 text-xs-left">
        <p class="m-b-1"></p> <!--'<b>' + $.trim(response[key].job_title)  + ' <br>Tööruum: ' + $.trim(response[key].room) + '<br/><a href="mailto:' +  $.trim(response[key].email) + '>"' + $.trim(response[key].email)+ '</a></b>' -->
        <p class="m-b-0"></p> <!--response[key].phone + ' ' + response[key].cell_phone-->
    </div>
    <div class=" col-sm-4 text-xs-right m-b-1">
        <img src="" class="rounded-circle lg" alt="">  <!--to src response[key].image-->
    </div>
</div>

1
它正在工作，但我在问题上犯了一个小错误——info-block.bg-grey.m-b-2.p-a-2被包装在另一个div中，这会创建一个网格布局，我想是吧？ 但是当我更改var clonedEle = ('.col-sm-12 col-md-6 col-lg-4');和clonedEle.insertAfter('.col-sm-12 col-md-6 col-lg-4');时，页面显示为空？ - Martin Tee
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接