[javascript/jQuery] html 요소 삽입

문제상황

부모요소의 첫번째 자식요소에 새로운 요소를 삽입하고 싶었다. jQuery를 이용해 내가 원하는 위치에 html 요소를 삽입하기 위해 학습했다.

HTML 요소 삽입하기

• before() : selector 이전에 content를 삽입하는 메소드

  • $(selector).before(content)
    예) $("#type").before("<li><a>type1</a></li>"); : id가 type인 요소 이전에 li 삽입

• after() : selector 이후에 content를 삽입하는 메소드

  • $(selector).after(content)
    예) $("#type").after("<li><a>type1</a></li>"); : id가 type인 요소 이후에 li 삽입

• prepend() : selector 맨 앞 자식 요소로 content를 삽입하는 메소드

  • $(selector).prepend(content)
    예) $("#type").prepend("<li><a>type1</a></li>"); : id가 type인 요소 맨 앞 자식요소로 li 삽입

• append() : selector 맨 뒤 자식 요소로 content를 삽입하는 메소드

  • $(selector).append(content)
    예) $("#type").append("<li><a>type1</a></li>"); : id가 type인 요소 맨 뒤 자식요소로 li 삽입