使用jQuery添加大量HTML

Appending lots of HTML with jQuery

本文关键字：HTML 添加 jQuery 使用      更新时间：2023-09-26

在尝试创建单页网站时，我已经养成了使用jQuery的.append函数的习惯。但是，我确信必须有更好的方法将大块代码(用于表、图等项目(附加到页面中。例如，这里有一个来自AJAX响应的可怕的块：

  $.ajax({
    data: {
        'cmd': 'rating',
        'api' : target
    },
    url: "api/feedback.php",
    global: false,
    type: "POST",
    cache: false,
    dataType: "json",
    success: function(response) {
            document.getElementById("swagger-ui-container").innerHTML = "";
            var formElement = '<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-md-12 title" for="title" style="padding-top:4vh; padding-bottom: 4vh"><h1 align="center">' + target + ' feedback form</h1></label> </div> <div class="form-group"> <label class="control-label col-md-2" for="name">Name:</label> <div class="col-md-9"> <input type="name" class="form-control" id="name" placeholder="Please enter your name."> </input> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="email">Email:</label> <div class="col-md-9"> <input type="email" class="form-control" id="email" placeholder="Please enter your email address."> </input> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="comments">Comments:</label> <div class="col-md-9"> <textarea class="form-control" rows="10" id="comments" placeholder="Please enter your comments."></textarea> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="rating" style="padding-top: 1.3vh">Please rate this API <br/>(click the stars):</label> <div class="col-md-9"> <div class="stars"> <form action=""> <input class="star star-5" id="star-5" type="radio" name="star"/> <label class="star star-5" for="star-5"></label> <input class="star star-4" id="star-4" type="radio" name="star"/> <label class="star star-4" for="star-4"></label> <input class="star star-3" id="star-3" type="radio" name="star"/> <label class="star star-3" for="star-3"></label> <input class="star star-2" id="star-2" type="radio" name="star"/> <label class="star star-2" for="star-2"></label> <input class="star star-1" id="star-1" type="radio" name="star"/> <label class="star star-1" for="star-1"></label> Current Rating: ' + response[0]['rating'] + '</form> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-9"> <button type="submit" class="btn btn-success" style="margin-bottom: 5vh">Submit a Review</button> </div> </div> </form>';
            document.getElementById("swagger-ui-container").innerHTML = formElement;
            console.log(response);
    }
});

有没有更好的方法可以在不使用大量.append调用的情况下管理这样的块？

您可以在HTML中创建元素并将其隐藏，然后将其用作模板。使用clone，然后在正确的位置添加响应的数据。

例如：

<div id="templates" style="display: none;">
    <div class="feedbackTmpl>
        <p class="feedbackResponse"></p>
    </div>
   <!-- Add more templates if needed... -->
</div>
// Do your ajax call, and in the success response:
var feedbackTmpl = $('.feedbackTmpl', '#templates').clone();
$('.feedbackResponse', feedbackTmpl).text(response[0]['rating']);
// Boom! feedbackTmpl is ready to be inserted / appended

作为一种通用的编码理念，我喜欢将数据从视图中分离出来。我将jquery视为提供数据，并将其显示和样式留给html页面中的视图。

我的意思是，你应该在页面中创建html(而不是在javascript代码的成功函数中(。您可以使用css来隐藏它，直到数据准备好为止。然后，当您拥有数据时，使用javascript将其注入元素中。

例如

您的html页面应包含完整视图/html/

<div id="mycontent" class="hidden">
  <span id="name"></span> feedback form...
  ...
</div>
.hidden {
  display: none;
}

javascript/jquery应该只获取数据并将其注入

$.ajax({
  ...
  success: function(response) {
    $('#name').text(response);
    ...
    $('#mycontent').show();
  }
})

我相信这比在js代码中创建/附加html要好得多。如果必须这样做，请将其保留为小的html片段，而不是整个html页面。

相关文章：