jquery에서 요소를 추가하는 방법은 무엇입니까?

이번에는 요소를 추가하는 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); 이는 B 요소 다음에 A 요소를 교체하는 것입니다.
예를 들어, CC

HELLO

").insertAfter($ ("p")),

HELLO

CC가 됩니다. 둘의 위치가 바뀌었습니다

3.append()와appendTo()메소드의 차이점

append() - 해당 메소드는 메소드의 매개변수를 jquery 객체에 추가하는 것입니다. : A.append( B)는 B를 A에 넣은 다음 A의 하위 요소의 마지막 위치를 추가하는 것을 의미합니다.
appendTo() - 해당 방법은 jquery 개체를 AppendTo에서 지정한 매개 변수에 추가하는 것입니다.
예: 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의 하위 요소의 첫 번째 위치에 삽입하는 것을 의미합니다.

Example

1, 로컬 메서드 삽입

/**
 * 在父级元素上操作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);
    });
  }
}

2, 앞에 추가, 앞에 추가 , after

$.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);
    });
  }
};

3, prependTo, prependTo, insertBefore, insertAfter

이러한 접미사와 위의 차이점은 반환되는 결과가 다르다는 것입니다. 예:

$('#demo').append('<a/>');
// => 返回的是 $('#demo')
$('<a/>').appendTo($('#demo'));
// => 返回的是$('a');

그래서 둘 사이의 관계는 단지 반환 결과가 다를 뿐이고 다른 모든 것은 동일하므로 다음과 같이 해결할 수 있습니다.

_each({
  appendTo: 'append',
  prependTo: 'prepend',
  insertBefore: 'before',
  insertAfter: 'after'
}, function(key, val) {
  $.fn[key] = function(selector) {
    this.each(function() {
      $(selector)[val](this);
    });
    return this;
  };
});

jquery 요소 추가 방법(뒤에 앞에 추가하는 차이점) 전)

append() 메소드는 선택한 요소 끝에 내용 삽입에 있습니다.

prepend() 메서드는 선택한 요소의 시작 부분에 콘텐츠를 삽입합니다.

after() 메서드는 선택한 요소 뒤에 콘텐츠를 삽입합니다.

before() 메서드는 선택한 요소 앞에 콘텐츠를 삽입합니다.

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<p class="testp">
  <ul>
    <li>第一个li标签</li>
  </ul>
</p>
<script>
  //append
  $('.testp ul').append('<li>append 插入的li</li>');
  //prepend
  $('.testp ul').prepend('<li>prepend 插入的li</li>');
  //after
  $('.testp ul').after('<li>after 插入的li</li>');
  //before
  $('.testp ul').before('<li>before 插入的li</li>');
</script>

Rendering

html 구조 다이어그램

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jquery가 선택한 CSS 스타일을 삭제하는 방법

jQuery가 형제 요소를 가져오는 방법

위 내용은 jquery에서 요소를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!