// 创建新元素
var $newElement = $('<div class="new-item">New Item</div>');

// 追加到DOM
$('#container').append($newElement);

// 直接对新元素进行操作
$newElement.css('color', 'red');

// 为现有或未来添加的元素绑定事件
$(document).on('click', '.dynamic-item', function() {
    alert('Clicked on dynamic item!');
});

// 后来添加的元素也会响应这个事件
$('#container').append('<div class="dynamic-item">Click me</div>');

function addElementWithCallback(content, callback) {
    var $element = $('<div>').text(content);
    $('#container').append($element);
    if (typeof callback === 'function') {
        callback($element);
    }
}

// 使用回调
addElementWithCallback('Hello', function($el) {
    $el.addClass('highlight');
});

// 错误方式 - 不会作用于动态添加的元素
$('.dynamic-btn').click(function() {});

// 正确方式 - 使用事件委托
$(document).on('click', '.dynamic-btn', function() {});

$(document).ready(function() {
    // 在这里执行追加和样式操作
});

// 创建文档片段
var fragment = document.createDocumentFragment();

// 批量添加元素
for (var i = 0; i < 100; i++) {
    var $el = $('<div>').text('Item ' + i);
    fragment.appendChild($el[0]);
}

// 一次性添加到DOM
$('#container').append(fragment);

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMoreItems();
    }
});

function loadMoreItems() {
    $.get('/api/items', function(data) {
        var $items = $(data).map(function(item) {
            return $('<div class="item">').text(item.name);
        });
        $('#item-container').append($items);
    });
}

$('#add-field').click(function() {
    var fieldCount = $('.form-field').length;
    var $newField = $('<div class="form-field">')
        .append($('<input>').attr({
            type: 'text',
            name: 'field_' + fieldCount,
            placeholder: 'Field ' + (fieldCount + 1)
        }));
    $('#form-container').append($newField);
    
    // 对新字段进行初始化
    $newField.find('input').focus();
});