添加元素时，使用jQuery比使用JavaScript慢得多

我想在单击按钮时添加一个选择字段。选项的值是由Yii Framework创建的

$all_cs

（约7k项）

增加课程

选项元素内容：

$all_cs =  $form->dropDownList($model, 'cos[n]', $allCourses, array('prompt'=>''));
$pos = strpos($all_cs, "<option");
$rpos = strrpos($all_cs, "</option>");
$all_cs = substr($all_cs, 0, $rpos+9);
$all_cs = substr($all_cs, $pos, strlen($all_cs) - $pos);
$all_cs = str_replace("\n", "", $all_cs);

$all_cs=$form->dropDownList（$model，'cos[n]”，$allCourses，array（'prompt'=>“”））；
$pos=STRPO（$all_cs，“”）；
});
});

使用JS时，字段添加速度非常快，添加多个字段时，时间是恒定的

但是当使用JQuery时，字段的添加速度较慢，并且尽可能多的字段的添加速度较慢。当字段数超过10时，需要几秒钟才能完成

我想回答以下问题：

1-为什么在添加多个字段时使用JQuery速度较慢且不是常量

2-如何更改JQuery函数以使其更快？在这种情况下我们应该使用JQuery吗

（对不起，我的英语不好）

append（）比单个html（）/text（）更难使用

下面的代码有望加快jquery版本的速度：

$(document).ready(function(){

    $(".cs_name").click(function(){
        $("#cos_container").html(generateContent());
    });

    function generateContent() {

        return  '<div>' +
                '<select name="new_courses[]">' +
                '<?php echo $all_cs; ?>' +
                '</select>' +
                '<span class="delete_div" href="#">delete</span>' +
                '</div><br>';
    }
});

$（文档）.ready（函数（）{
$（“.cs_name”）。单击（函数（）{
$（“#cos_container”）.html（generateContent（））；
});
函数generateContent（）{
返回“”+
'' +
'' +
'' +
“删除”+
“
”；
}
});

要添加多个选择框：

，它似乎比您的原始代码快得多？正如其他评论中提到的，选择器查找是瓶颈

$(document).ready(function(){

  $(".cs_name").click(function(){
        $("#cos_container").append(generateContent());
    });

    function generateOptionsion() {

        return  '<div>' +
                    '<select name="new_courses[]">' +
                        '<?php echo $all_cs; ?>' +
                    '</select>' +
                    '<span class="delete_div" href="#">Delete</span>' +
                '</div><br>';
    }

});

$（文档）.ready（函数（）{
$（“.cs_name”）。单击（函数（）{
$（“#cos_容器”）.append（generateContent（））；
});
函数generateOptions（）{
返回“”+
'' +
'' +
'' +
“删除”+
“
”；
}
});

每次执行

$（选择器）

都必须在DOM中搜索匹配的元素。这是一个缓慢的过程，因此始终要寻找方法来最小化DOM交互的数量

在这方面，jQuery方法链接可能非常有效

例如：

$(document).ready(function(){
    $(".cs_name").click(function() {
        $("#cos_container")
            .append("<div><select name='new_courses[]'></select></div><br/>");//ensure all HTML fragments are well formed and complete at the point they are inserted.
            .find("select")
            .append('<?php echo $all_cs; ?>');
    });
});

$（文档）.ready（函数（）{
$（“.cs_name”）。单击（函数（）{
$（“cos#U容器”）
.append（“
”）；//确保所有HTML片段在插入时格式正确且完整。
.查找（“选择”）
.附加（“”）；
});
});

---

这会更快，但可能仍然没有POJS代码快。

这可能是大多数新的JavaScript/jQuery开发人员的误解

让我说清楚：

jQuery是一个JavaScript库，因此无论您在jQuery中编写了什么，它都将间接运行特定的原始JavaScript函数。因此，它更像是您的jQuery代码将调用类似于

addFields\u cos

的东西

jQuerylib非常容易理解，作为开发人员编写代码也很容易，它还附带了许多实用函数，可用于遍历DOM结构，而使用原始JavaScript可能会很繁琐。我主要喜欢jQuerylib，因为它支持AJAX功能，编写和管理远程调用非常容易（与原始JavaScript相比）

---

作为一名开发人员，它取决于您决定何时使用什么，如果只是关于客户端的一些简单事件处理，那么我会说不需要jQuery。但是如果它比处理事件更复杂，比如遍历dom结构或使用一些主要依赖于jQuery并需要AJAX功能的第三方库，那么使用jQuery

您能估计一下这两个脚本之间的区别吗？您是指仅附加还是指整个dom加载和呈现过程？@briosheje:我只有这个脚本。区别如下：添加[1,2,3,4,5,6..]元素。时间：JS[0.2s，0.2s，0.2s，0.2s…]-JQuery[0.3s，0.4s，0.6s，0.8s，1.2s，1.6s…]它只添加了一个元素！

$(document).ready(function(){

    $(".cs_name").click(function(){
        $("#cos_container").html(generateContent());
    });

    function generateContent() {

        return  '<div>' +
                '<select name="new_courses[]">' +
                '<?php echo $all_cs; ?>' +
                '</select>' +
                '<span class="delete_div" href="#">delete</span>' +
                '</div><br>';
    }
});

$(document).ready(function(){

  $(".cs_name").click(function(){
        $("#cos_container").append(generateContent());
    });

    function generateOptionsion() {

        return  '<div>' +
                    '<select name="new_courses[]">' +
                        '<?php echo $all_cs; ?>' +
                    '</select>' +
                    '<span class="delete_div" href="#">Delete</span>' +
                '</div><br>';
    }

});

$(document).ready(function(){
    $(".cs_name").click(function() {
        $("#cos_container")
            .append("<div><select name='new_courses[]'></select></div><br/>");//ensure all HTML fragments are well formed and complete at the point they are inserted.
            .find("select")
            .append('<?php echo $all_cs; ?>');
    });
});