Javascript jqueryappend正在破坏浏览器

我对Javascript/jQuery非常陌生，但我有一段代码，我正试图通过删除硬编码的document.getElementById并用变量替换它们来增强代码的健壮性，但在这样做的过程中，我试图用jQuery append替换appendChild，这会破坏浏览器

 function Sort(a, b) {
    return (a.innerHTML > b.innerHTML) ? 1 : -1;
}

var $s = $('#ctl00_FirstColumn_lstAEOTestType');
var options = $('#ctl00_FirstColumn_lstAEOTestType option');
var searchBox = $('#ctl00_FirstColumn_txttypesearch');
$(searchBox).keyup(function () {
    var $HiddenOptions = $('#SelectHidden option');
    $HiddenOptions.each(function (index, value) {
        document.getElementById('ctl00_FirstColumn_lstAEOTestType').appendChild(this);
        //$(options).append(this);  THIS IS WHAT I WANT TO USE
    });
    var search = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    var element = options.filter(function () {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(search);
    }).appendTo(document.getElementById('SelectHidden'));
    $(options).sort(Sort).appendTo(s);
})
$s.scrollTop(0)

我在Jfiddle linked中有一个半工作的例子

---

如果您有任何建议，请让我知道，因为我对这一点非常陌生。

做了一些更正以帮助您开始：

var $s = $('#ctl00_FirstColumn_lstAEOTestType');
var options = $('#ctl00_FirstColumn_lstAEOTestType option');
var searchBox = $('#ctl00_FirstColumn_txttypesearch');

$(searchBox).keyup(function () {

    var $HiddenOptions = $('#SelectHidden option');

    $HiddenOptions.each(function (index, value) {
        options.append(this); 
    });

    var search = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    var element = options.filter(function () {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(search);
    }).appendTo('#SelectHidden'); 
    // not sure what 'Sort' is --it'll error out
    //options.sort(Sort).appendTo($s);
})
$s.scrollTop(0)

---

这就是重构代码的方法

$(searchBox).keyup(function (elem) {

访问变量中的事件，然后代替

document.getElementById('ctl00_FirstColumn_lstAEOTestType').appendChild(this);

写

这样你甚至不需要elemen的身份证

一个有效的例子

旁注：

Dom横向是一种昂贵的操作。存储jQuery选择器的结果是一种很好的做法，但是在您的情况下，您不需要执行另一个jQuery查找，因为您已经有一个保存本机html元素的变量

如果要使用jQuery方法，请编写

var opt = $(elem.currentTarget);

---

定义“断开浏览器”。使用javascript应该不可能使浏览器崩溃，您的代码甚至不应该导致无限循环。我们到底应该建议什么？lol..如果您没有提供一个完整的工作示例，我们无法测试您的代码，但是我认为keyup事件的第一个参数是元素目标，您可以使用它作为元素的引用，而不是“this”。如果您使用jQuery，也请使用jQuery。将jQuery中的所有DOM方法更改为一致的，并且不应该是

~您的问题应该是如何访问javascript事件中的调用者元素
var opt = $(elem.currentTarget);