// 创建新元素但未插入DOM
var $newDiv = $('<div class="new-element">This is a new div</div>');

// 从HTML字符串创建jQuery对象
var htmlString = '<ul><li>Item 1</li><li>Item 2</li></ul>';
var $parsedElements = $(htmlString);

// 更安全地解析HTML字符串
var htmlString = '<div><p>Paragraph</p></div>';
var parsedElements = $.parseHTML(htmlString);
var $jQueryElements = $(parsedElements);

var $newImg = $('<img>');
$newImg.attr('src', 'image.jpg');
$newImg.addClass('thumbnail');

var $newDiv = $('<div>');
$newDiv.append('<p>Some content</p>');
$newDiv.prepend('<h2>Title</h2>');

var $complexHtml = $('<div><ul><li>One</li><li>Two</li></ul></div>');
var $listItems = $complexHtml.find('li');

// 方法1：插入后绑定
var $button = $('<button>Click me</button>');
$('body').append($button);
$button.on('click', function() {
    alert('Clicked!');
});

// 方法2：事件委托
$(document).on('click', 'button.dynamic', function() {
    alert('Clicked!');
});
var $button = $('<button class="dynamic">Click me</button>');
$('body').append($button);

var $tempContainer = $('<div style="display: none;">');
$('body').append($tempContainer);

var $element = $('<div>Test</div>');
$tempContainer.append($element);

// 现在可以获取样式信息
var width = $element.width();

// 完成操作后移除或显示
$tempContainer.remove();
$('body').append($element);

// 不完整的HTML字符串
var html = '<tr><td>Cell 1</td><td>Cell 2</td></tr>';

// 这样可能无法正确解析
// var $cells = $(html).find('td'); // 可能不工作

// 更好的方式 - 提供上下文
var $table = $('<table><tbody></tbody></table>');
$table.find('tbody').append(html);
var $cells = $table.find('td'); // 现在可以工作