如何通过jQuery动态添加元素

下面的脚本创建了一个滑块小部件，它获取一个定义列表并将其转换为幻灯片。 每个dt元素都通过css旋转成为“脊椎”，用于显示dt的兄弟dd元素。

我正在尝试做的是增强它，以便我可以选择从布局中移除刺，只需使用幻灯片两侧的前进和后退按钮。 为此，我通过CSS将dt设置为display：none，并使用“Remove spine layout”注释下的代码来测试是否可见。

这可以很好地去除刺，现在我需要动态创建2个绝对定位的div来保存左箭头和右箭头图像，以及附加一个点击处理程序。

我的第一个问题是我创建div的尝试不起作用。

任何帮助非常感谢。

jQuery.noConflict(); (function(jQuery) { if (typeof jQuery == 'undefined') return; jQuery.fn.easyAccordion = function(options) { var defaults = { slideNum: true, autoStart: false, pauseOnHover: true, slideInterval: 5000 }; this.each(function() { var settings = jQuery.extend(defaults, options); jQuery(this).find('dl').addClass('easy-accordion'); // -------- Set the variables ------------------------------------------------------------------------------ jQuery.fn.setVariables = function() { dlWidth = jQuery(this).width()-1; dlHeight = jQuery(this).height(); if (!jQuery(this).find('dt').is(':visible')){ dtWidth = 0; dtHeight = 0; slideTotal = 0; // Add an element to rewind to previous slide var slidePrev = document.createElement('div'); slidePrev.className = 'slideAdv prev'; jQuery(this).append(slidePrev); jQuery('.slideAdv.prev').css('background':'red','width':'50px','height':'50px'); // Add an element to advance to the next slide var slideNext = document.createElement('div'); slideNext.className = 'slideAdv next'; jQuery(this).append(slideNext); jQuery('.slideAdv.next').css('background':'green','width':'50px','height':'50px'); } else { dtWidth = jQuery(this).find('dt').outerHeight(); if (jQuery.browser.msie){ dtWidth = jQuery(this).find('dt').outerWidth();} dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width()); slideTotal = jQuery(this).find('dt').size(); } ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width()); ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height()); }; jQuery(this).setVariables(); // -------- Fix some weird cross-browser issues due to the CSS rotation ------------------------------------- if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ } if (jQuery.browser.mozilla){ var dtTop = dlHeight - 20; var dtOffset = - 20; /* FF */ } if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ } if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; } /* Opera */ // -------- Getting things ready ------------------------------------------------------------------------------ var f = 1; var paused = false; jQuery(this).find('dt').each(function(){ jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset}); // add unique id to each tab jQuery(this).addClass('spine_' + f); // add active corner var corner = document.createElement('div'); corner.className = 'activeCorner spine_' + f; jQuery(this).append(corner); if(settings.slideNum == true){ jQuery(''+f+'').appendTo(this); if(jQuery.browser.msie){ var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left')); if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){ jQuery(this).find('.slide-number').css({'bottom':'auto'}); slideNumLeft = slideNumLeft - 14; jQuery(this).find('.slide-number').css({'left': slideNumLeft}) } if(jQuery.browser.version == 8.0 || jQuery.browser.version == 9.0){ var slideNumTop = jQuery(this).find('.slide-number').css('bottom'); var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')) - 20; jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal}); slideNumLeft = slideNumLeft - 10; jQuery(this).find('.slide-number').css({'left': slideNumLeft}) jQuery(this).find('.slide-number').css({'marginTop': 10}); } } else { var slideNumTop = jQuery(this).find('.slide-number').css('bottom'); var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')); jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal}); } } f = f + 1; }); if(jQuery(this).find('.active').size()) { jQuery(this).find('.active').next('dd').addClass('active'); } else { jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active'); } jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth}); jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight}); // -------- Functions ------------------------------------------------------------------------------ jQuery.fn.findActiveSlide = function() { var i = 1; this.find('dt').each(function(){ if(jQuery(this).hasClass('active')){ activeID = i; // Active slide } else if (jQuery(this).hasClass('no-more-active')){ noMoreActiveID = i; // No more active slide } i = i + 1; }); }; jQuery.fn.calculateSlidePos = function() { var u = 2; jQuery(this).find('dt').not(':first').each(function(){ var activeDtPos = dtWidth*activeID; if(u <= activeID){ var leftDtPos = dtWidth*(u-1); jQuery(this).animate({'left': leftDtPos}); if(u < activeID){ // If the item sits to the left of the active element jQuery(this).next().css({'left':leftDtPos+dtWidth}); } else{ // If the item is the active one jQuery(this).next().animate({'left':activeDtPos}); } } else { var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1)); jQuery(this).animate({'left': rightDtPos}); var rightDdPos = rightDtPos+dtWidth; jQuery(this).next().animate({'left':rightDdPos}); } u = u+ 1; }); setTimeout( function() { jQuery('.easy-accordion').find('dd').not('.active').each(function(){ jQuery(this).css({'display':'none'}); }); }, 400); }; jQuery.fn.activateSlide = function() { this.parent('dl').setVariables(); this.parent('dl').find('dd').css({'display':'block'}); this.parent('dl').find('dd.plus').removeClass('plus'); this.parent('dl').find('.no-more-active').removeClass('no-more-active'); this.parent('dl').find('.active').removeClass('active').addClass('no-more-active'); this.addClass('active').next().addClass('active'); this.parent('dl').findActiveSlide(); if(activeID  totalSlides) {newSlide = 1; paused = true;} jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide } } // -------- Let's do it! ------------------------------------------------------------------------------ function trackerObject() {this.value = null} var timerInstance = new trackerObject(); jQuery(this).findActiveSlide(); jQuery(this).calculateSlidePos(); if (settings.autoStart == true){ var accordianInstance = jQuery(this); var interval = parseInt(settings.slideInterval); timerInstance.value = setTimeout(function(){ accordianInstance.rotateSlides(interval, timerInstance); }, interval); } jQuery(this).find('dt').not('active').click(function(){ var accordianInstance = jQuery(this); //JSB to fix bug with IE < 9 jQuery(this).activateSlide(); clearTimeout(timerInstance.value); timerInstance.value = setTimeout(function(){ accordianInstance.rotateSlides(interval, timerInstance); }, interval); }); if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){ jQuery('dt').hover(function(){ jQuery(this).addClass('hover'); }, function(){ jQuery(this).removeClass('hover'); }); } if (settings.pauseOnHover == true){ jQuery('dd').hover(function(){ paused = true; }, function(){ paused = false; }); } }); }; })(jQuery); 

Answer 1

在jQuery中创建元素很简单：

 $newDiv = $('
'); $newDiv.css({ 'position': 'absolute', 'top': '10px', 'left': '10px' }); $newDiv.on('click', function() { alert('You have clicked me'); }); $('#your_container').append($newDiv);