JQuery-读书笔记--------Jquery Manipulation must know

Jquery manipulation 操作必须依据dom进行操作。而如果你想在虚拟的dom中进行该操作就会发现显示效果和预先的完全不一致；

正确的方法：

options = $.extend({
								"title" : ""
							}, options);
					var title = $("h1", this).text();
					var aLink = $("a", this);
					var numOfA = aLink.size();

					$(this).empty();
					var head = "<div class='lable_title'>" + title + "</div>";
					var center = $("<div class=\"nav-1\" />");
					var it;
					var end = "<span class='cnav_left'></span>";
					$(this).append($(head)).append(center).append($(end));

					for (var index = 0; index < numOfA; index++) {
						it = $(aLink[index]);
						var isBr = (index + 1) % 3;
						center.append(it);

						if (isBr == 0) {
							center.append("<br/>");

						} else {

							center.append("<span>|</span>");

						}
						

					}

 有问题的：

options = $.extend({
								"title" : ""
							}, options);
					var title = $("h1", this).text();
					var aLink = $("a", this);
					var numOfA = aLink.size();

					$(this).empty();
					var head = "<div class='lable_title'>" + title + "</div>";
					var center = $("<div class=\"nav-1\" />");
					var it;
					for (var index = 0; index < aLink.length; index++) {
						// $("<span>|</span").insertAfter($(aLink[index]));
						 it= $(aLink[index]);

						if ((index % 3) == 0) {

							// $("<br/>").insertAfter($(aLink[index]));
							it = it.after("<br/>");

							// alert(it.html());
						} else {

							it = it.after("<span>|</span>");

							// alert(it.html());
						}

						center.append(it);

						alert(center.html());
					}
					// var center=$("<div class=\"nav-1\"
					// />").append($(aLink[index]));

					var end = "<span class='cnav_left'></span>";
					$(this).append($(head)).append(center).append($(end));