javascript - 如何创建和缓存尚不存在的 DOM 元素？

Question

我正在写一个断言函数。如果#assert 尚不存在，如何缓存它？

function assert( outcome, description ) {
   if (!$('#assert').length) {
      $('body').append('<ul id="assert"></ul>');
   }
   $('#assert').append('<li class="' + (outcome ? 'hide' : 'alert-danger') + '">' + description + '</li>');
}

Answer 1

$assert = $('<ul id="assert"></ul>');
$('body').append($assert);

请注意，我没有$assert使用var关键字声明，因此赋予它全局范围（以防您在其他地方想要它）。如果您只需要将其限定为您的断言函数，请使用var.

Answer 2

你的意思是这样的？

 div = $("<div>").attr("id", "assert")

Answer 3

我会这样做...

function assert( outcome, description ) {
    var assrt = $('#assert');
    if (!assrt || !assrt.length) {
        assrt = $('<ul>',{id:"assert"}).appendTo('body');
    }
    assrt.append('<li>', {className:outcome ? 'hide' : 'alert-danger', text:description});
}

---

或者，如果该assert元素打算供后续调用使用，我可能会使用闭包来维护调用之间的引用......

var assert = (function() {
    var assrt = $('#assert');

    return function( outcome, description )
        if (!assrt || !assrt.length) {
            assrt = $('<ul>',{id:"assert"}).appendTo('body');
        }
        assrt.append('<li>', {className:outcome ? 'hide' : 'alert-danger', text:description});
    };
}());

---

您可以通过返回几个函数来扩展它...

var assert = (function() {
    var assrt = $('#assert');

    function verify_assert_container() {
        if (!assrt || !assrt.length) {
            assrt = $('<ul>',{id:"assert"}).appendTo('body');
        }
    }

    return {
        add: function( outcome, description )
            verify_assert_container();
            assrt.append('<li>', {className:outcome ? 'hide' : 'alert-danger', text:description});
        },
        empty: function() {
            verify_assert_container();
            assrt.empty();
        },
        sort: function() {
            verify_assert_container();
            // use sorting algorithm to reorder the LI elements
        },
        destroy: function() {
            if (assrt) {
                assrt.remove();
                assrt = null;
            }
        }
    };
}());

并像这样使用它...

assert.add('foo', 'bar');
assert.empty();
assert.destroy();