今回は、要素を追加するためのjqueryメソッドと、jqueryで要素を追加するための注意事項を紹介します。実際のケースを見てみましょう。
1. after() メソッドと before() メソッドの違い
after() - そのメソッドは、メソッド内のパラメーターを jquery オブジェクトの後ろに追加することです
例: A.after(B) ) A の後に B を置くことを意味します;
before() - そのメソッドは、メソッド内のパラメーターを jquery オブジェクトの前に追加することです。
例: A.before(B) は A を B の前に置くことを意味します
2. insertAfter() メソッドと insertBefore() メソッドの違い
実際には、要素の位置を交換することを意味します。
これはページである可能性があります。要素には既存の要素があり、動的に追加された要素であることもあります。
例: A.insertAfter(B); これは、A 要素を B 要素の後ろに入れ替えます。
たとえば、CC
HELLO
を使用します。 ").insertAfter($ ("p")) とすると、HELLO
CCになります。 2 つの位置は入れ替わりました append() - そのメソッドは、メソッド内のパラメータを jquery オブジェクトに追加することです
たとえば、 : A.append( B) は、B を A に入れて、A の子要素の最後の位置を追加することを意味します;
appendTo() - そのメソッドは、appendTo で指定されたパラメーターに jquery オブジェクトを追加することです。
例: A.appendTo(B) は、A を B に入れて、B の子要素の最後の位置を追加することを意味します
4. prepend() メソッドと prependTo() メソッドの違い
append ()—— このメソッドは、メソッド内のパラメーターを jquery オブジェクトに追加することです。 例: A.append(B) は、B を A に入れ、それを A Position の最初の子要素に挿入することを意味します。 ) - そのメソッドは、appendTo で指定されたパラメーターに jquery オブジェクトを追加することです。
例: A.appendTo(B) は、A を B に入れて、B の子要素の最初の位置に挿入することを意味します。 、after
/** * 在父级元素上操作DOM * @param {Object} parent 父级元素,可以是element,也可以是Yquery对象 * @param {String} position 位置: beforebegin/afterbegin/beforeend/afterend * @param {*} any 任何:string/text/object * @param {Number} index 序号,如果大于0则复制节点 * @return {Undefined} * @version 1.0 * 2013年12月2日17:08:26 */ function _insert(parent, position, any, index) { if ($.isFunction(any)) { any = any.call(parent); } // 字符串 if ($.isString(any)) { if (regTag.test(any)) { parent.insertAdjacentHTML(position, any); } else { parent.insertAdjacentText(position, any); } } // 数字 else if ($.isNumber(any)) { parent.insertAdjacentText(position, any); } // 元素 else if ($.isElement(any)) { parent.insertAdjacentElement(position, index > 0 ? any.cloneNode(!0) : any); } // Yquery else if (_isYquery(any)) { any.each(function() { _insert(parent, position, this); }); } }
$.fn = { /** * 追插 * 将元素后插到当前元素(集合)内 * @param {String/Element/Function} any * @return this * @version 1.0 * 2013年12月29日1:44:15 */ append: function(any) { return this.each(function(index) { _insert(this, 'beforeend', any, index); }); }, /** * 补插 * 将元素前插到当前元素(集合)内 * @param {String/Element/Function} any * @return this * @version 1.0 * 2013年12月29日1:44:15 */ prepend: function(any) { return this.each(function(index) { _insert(this, 'afterbegin', any, index); }); }, /** * 前插 * 将元素前插到当前元素(集合)前 * @param {String/Element/Function} any * @return this * @version 1.0 * 2013年12月29日1:44:15 */ before: function(any) { return this.each(function(index) { _insert(this, 'beforebegin', any, index); }); }, /** * 后插 * 将元素后插到当前元素(集合)后 * @param {String/Element/Function} any * @return this * @version 1.0 * 2013年12月29日1:44:15 */ after: function(any) { return this.each(function(index) { _insert(this, 'afterend', any, index); }); } };
$('#demo').append('<a/>'); // => 返回的是 $('#demo') $('<a/>').appendTo($('#demo')); // => 返回的是$('a');
jquery 要素を追加するメソッド (append prepend after の違い)前)
append() メソッドは、選択した要素の最後にコンテンツを挿入します。
prepend() メソッドは、選択した要素の先頭にコンテンツを挿入します。
after() メソッドは、選択した要素の後にコンテンツを挿入します。 before() メソッドは、選択した要素の前にコンテンツを挿入します。
_each({ appendTo: 'append', prependTo: 'prepend', insertBefore: 'before', insertAfter: 'after' }, function(key, val) { $.fn[key] = function(selector) { this.each(function() { $(selector)[val](this); }); return this; }; });
レンダリング
html構造図この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:jQuery が選択された CSS スタイルを削除する方法
jQuery が兄弟要素を取得する方法
以上がjqueryで要素を追加する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。