将Javascript类应用于生成的内容，然后再将其应用于DOM

我的情况是，我通过Javascript对象中的AJAX调用生成内容（视频链接）。从后端返回此内容后，将生成一个HTML字符串并将其附加到DOM中的当前HTML。 此HTML字符串包含“div”中的视频链接包装。我需要对每个新生成的div应用一个新的Javascript对象，并使用以下代码实现了这一点：

if(response.videos.length != 0) {   
        jQuery(response.videos).each(function(key, video) {             
            self.html += "<div class='col-md-4' data-related-video='" + video.videoId + "'>";
                self.html += '<a href="#" class="dashboard-video"></a>';
                self.html += '<div class="video-information">';
                    self.html += '<h5 class="tk-bebas-neue">' + video.videoName + '</h5>';
                    self.html += '<p>' + video.videoDesc + '</p>';
                    self.html += '<p>Equipment: ';

                    self.html += "</p>";
                    ......................................MORE CODE

                    self.html += "</div>";
                self.html += '</div>';
            self.html += "</div>";
            newRatingArrayKey.push("#" + self.relatedDiv + " div[data-related-video=" + video.videoId + "] .video-rating");
        });     
        jQuery("#" + jQuery(self.element).attr("data-related") + " .col-md-8").append(self.html);           
        jQuery(newRatingArrayKey).each(function(key, element) {
            element = jQuery(element);              
            newRatingObject[key] = new Rater(element, jQuery(element).attr("data-rel"), jQuery(element).find(".star"), jQuery(element).attr("data-user-id"));
        });

    }

if（response.videos.length！=0）{
jQuery（response.videos）.each（函数（键，视频）{
self.html+=“”；
self.html+=''；
self.html+=''；
self.html+=''+video.videoName+''；
self.html+=''+video.videoDesc+'
'；
self.html+='设备：'；
self.html+=“
”；
更多代码
self.html+=“”；
self.html+=''；
self.html+=“”；
newRatingArrayKey.push（“#”+self.relatedDiv+”div[data-related video=“+video.videoId+”].videorating”）；
});     
jQuery（“#”+jQuery（self.element）.attr（“数据相关”）+“.col-md-8”）.append（self.html）；
jQuery（newRatingArrayKey）.each（函数（键，元素）{
element=jQuery（element）；
newRatingObject[key]=新评分器（元素，jQuery（元素）.attr（“数据相关”），jQuery（元素）.find（.star），jQuery（元素）.attr（“数据用户id”）；
});
}

正如您所看到的，在生成新的HTML字符串之后，我将其添加到DOM中，然后循环新的div以对其应用“rater”类。我的问题是，在每个新生成的div应用于DOM之前，是否有一种方法可以将“rater”类应用于该div？这让我觉得，如果添加的新内容与应用于新内容的rater类之间出现故障，页面可能会出错。

---

谢谢

你实际上不必做任何事情来满足你的担忧。在代码执行完成之前，浏览器不会重新绘制页面，在添加“rater”类之前，也不会执行任何其他可能访问DOM的javascript代码

如果你真的想做你概述的事情，你可以使用一个独立的元素（例如，

$（“”）

）来添加你的内容，然后再将它移植到活动的DOM中

---

但真正最好的解决方案是不要连接字符串来创建DOM元素。相反，使用DocumentFragment和createElement api，然后根据您的选择自由添加类。

将其添加到DOM后，立即隐藏内容，然后在显示之前应用并执行测试。你也可以用一个类来做这个。这似乎是最简单的解决方案……在代码完成执行之前，不会重新绘制页面。