使用jQuery添加大量的HTML

-1

在试图制作单页网站时，我已经习惯了使用jQuery的.append函数。但是，我确定必须有一些更好的方法将大块代码（用于诸如表格，图表等的项目）附加到页面上。举例来说，这里是从Ajax响应狰狞块：使用jQuery添加大量的HTML

$.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电话？

来源

2016-09-12 qsorted

你的意思是追加（）或innerHTML的？ –

Google for“jquery模板库”。 – JJJ

而不是使用所有这些内联元素，您可以在页面上创建它们，然后使用jquery的.clone（）来克隆元素。 – Mike

-1

作为一般的编码哲学，我喜欢从视图中分离数据。我将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页面。

来源

2016-09-12 19:09:25 kane

您可以在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

来源

2016-09-12 19:15:50

使用jQuery添加大量的HTML

回答

相关问题