// 创建一个div元素
var $div = $('<div></div>');

// 创建带有属性的元素
var $link = $('<a href="https://example.com">链接</a>');

// 创建带有样式和内容的元素
var $paragraph = $('<p style="color:red;">这是一个段落</p>');

$('#container').append('<p>这是追加的内容</p>');

$('#container').prepend('<p>这是前置的内容</p>');

$('#target').after('<div>插入在目标元素之后</div>');

$('#target').before('<div>插入在目标元素之前</div>');

$(document).ready(function() {
    // 创建一个新的div元素
    var $newDiv = $('<div>', {
        id: 'new-div',
        class: 'box',
        css: {
            'background-color': '#f0f0f0',
            'padding': '10px',
            'margin': '10px 0'
        },
        text: '这是一个新创建的div'
    });
    
    // 创建一个链接
    var $newLink = $('<a>', {
        href: 'https://example.com',
        text: '访问示例网站',
        target: '_blank'
    });
    
    // 将链接追加到div中
    $newDiv.append($newLink);
    
    // 将整个div追加到body的末尾
    $('body').append($newDiv);
    
    // 在div之前插入一个标题
    $newDiv.before('<h2>动态添加的内容</h2>');
});

$('<div>')
    .addClass('highlight')
    .text('链式操作示例')
    .appendTo('#container');

// 高效的方式 - 构建完整HTML字符串
var html = '';
for (var i = 0; i < 100; i++) {
    html += '<div class="item">项目 ' + i + '</div>';
}
$('#container').append(html);

$(document).on('click', '.dynamic-element', function() {
    alert('点击了动态创建的元素');
});