JavaScript는 HTML(Hyper Text Markup Language)과 같은 요소를 생성하고 조작할 수 있는 다재다능한 프로그래밍 언어입니다. 'append()' 및 'appendChild()' 메서드를 따라 이 기능을 수행합니다. 이름에서 알 수 있듯이 두 메서드 모두 String 또는 Node 개체와 같은 HTML 요소를 추가합니다. 그러나 기능 및 기타 요인에 따라 서로 다릅니다.
이 가이드는 jQuery ' 추가 ()' 및 자바스크립트 ' 추가 어린이 ()” 방법.
jQuery ' 추가 ()' 및 자바스크립트 ' 추가 어린이 ()” 메서드를 사용하려면 먼저 이러한 메서드의 기본 사항을 살펴보십시오.
jQuery를 추가() 메서드는 무엇입니까?
jQuery ' 추가 ()” 메서드는 원하는 “Node” 및 “String” 개체를 부모 요소의 마지막 자식으로 끝에 삽입합니다.
통사론
$ ( 선택자 ) . 추가 ( 콘텐츠 , 기능 ( 색인 , HTML ) )위 구문에서:
- 콘텐츠 : HTML 요소, DOM 요소, jQuery 객체를 가리킨다.
- 기능 : 'index(요소 위치)'와 'html(선택한 요소의 html)' 매개변수를 갖는 사용자 정의 JavaScript 함수를 지정하는 추가 매개변수입니다.
자바스크립트 appendChild() 메서드는 무엇입니까?
'appendChild()' 메서드는 부모 요소의 마지막 자식 뒤에만 'Node' 개체를 추가합니다. 먼저 'createElement()' 메서드를 사용하여 원하는 Node 객체를 만든 다음 추가합니다.
통사론
요소. 추가 어린이 ( 마디 )이 구문에는 하나의 매개변수, 즉 “ 마디 '.
이름에서 알 수 있듯이 위에서 논의한 방법은 서로 다릅니다. 이 섹션에서는 서로 다른 몇 가지 요소를 파악합니다. 그것들을 살펴봅시다.
jQuery append()와 JavaScript appendChild() 메서드의 차이점
| 자귀 | jQuery 추가() | 자바 스크립트 추가 어린이() |
|---|---|---|
| 용법 | 새 '를 추가하여 상위 요소를 추가하는 데 사용할 수 있습니다. 마디 ' 그리고 ' 끈 '동시에 개체. | 새 '로 상위 요소를 추가하는 데만 사용할 수 있습니다. 마디 ”를 사용하여 생성 createElement ()' 방법. |
| 다중 노드 개체 | “ 추가 ()” 메서드는 다음 형식으로 연결된 부모 요소에 여러 Node 개체를 동시에 추가할 수 있습니다. 체재 : 'div.append(firstchild, secondchild, 'Linuxhint');' |
“ 추가 어린이 ()” 메서드는 여러 노드 객체에서 잘 작동하지만 한 번에 첫 번째 자식만 추가한 다음 다음 자식을 추가합니다. 체재 : 'div.appendChild(firstchild, secondchild, 'Linuxhint');' |
| 반환 값 | “ 추가 ()' 메서드는 '정의되지 않은' 반환 값을 보여주기 때문에 추가된 Node 개체를 반환하지 않습니다. 체재 : console.log(appendChildValue) // 정의되지 않음 |
한편, “ 추가 어린이 ()” 메서드는 추가된 Node 개체를 포함하는 값을 반환합니다. 체재 : console.log(appendChildValue) //
|
이제 나열된 주요 차이점의 실제 구현으로 이동하십시오.
차이점 1: jQuery append() 및 JavaScript appendChild() 메서드 적용
첫 번째 차이점에 따르면 ' 추가 ()” 메서드는 Node와 String을 모두 추가하지만 “appendChild()” 메서드는 Node 객체만 추가합니다.
HTML 코드
먼저 명시된 HTML 코드를 살펴보십시오.
< 몸 >< h2 > jQuery '추가()' 메서드 < / h2 > //추가()용 < h2 > jQuery를 'appendChild()' 방법 < / h2 > //appendChild()의 경우
< 단추 ID = 'btn1' 온 클릭 = 'myFunc1()' > DOM 문자열 추가 < / 단추 >
< 단추 ID = 'btn2' 온 클릭 = 'myFunc2()' > DOM 노드 추가 < / 단추 >
< 피 ID = '을 위한' > 이것은 단락입니다. < / 피 >
< 올 ID = '목록' >
< 저것 > 자바스크립트 튜토리얼 1 < / 저것 >
< 저것 > 자바스크립트 튜토리얼 2 < / 저것 >
< 저것 > 자바스크립트 튜토리얼 3 < / 저것 >
< / 올 >
< / 몸 >
위의 코드 라인에서:
- '
' 태그는 레벨 2의 부제목을 정의합니다.
- '
- '
' 태그는 추가된 문자열 값을 표시하기 위해 할당된 ID 'para'가 있는 빈 단락을 만듭니다.
- '
- ' 태그는 id가 'list'인 정렬된 목록을 추가하고 '
- ' 태그의 도움으로 나열된 항목을 추가합니다.
메모 : 'append()'와 'appendChild()' 메서드의 첫 번째 차이점은 위에서 작성한 HTML 코드를 따릅니다.
'append()' 메서드 jQuery 코드
먼저 'append()' 메서드 jQuery 코드의 개요:
< 머리 >< 스크립트 소스 = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > 스크립트 >
< 스크립트 >
$ ( 문서 ) . 준비가 된 ( 기능 ( ) {
$ ( '#btn1' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '피' ) . 추가 ( ' 추가된 문자열 .' ) ;
} ) ;
$ ( '#btn2' ) . 딸깍 하는 소리 ( 기능 ( ) {
$ ( '올' ) . 추가 ( '
} ) ;
} ) ;
스크립트 >
머리 >
위의 코드 라인에서:
- 먼저 jQuery ' CDN ” 공식 웹 사이트의 경로 “ https://jquery.com/ ”의 도움으로 소스 ' 기인하다.
- 다음으로 먼저 ' 준비가 된 ()' 메서드는 명시된 ' 기능 ()” HTML 문서가 로드될 때.
- 그 후, “ 딸깍 하는 소리 ()” 메서드는 id가 “인 버튼에 연결된 기능을 실행합니다. btn1 ” 버튼 클릭 시.
- 함수 정의에서 ' 추가 ()” 메서드는 지정된 문자열로 대상 단락 요소를 추가하는 데 사용됩니다.
- 추가된 “ 정렬된 목록 ” 즉, 주어진 항목에 추가할 Node 객체입니다.
산출
여기에서 'append()' 메서드의 도움으로 'String' 개체와 'Node' 개체가 모두 추가되었음을 확인합니다.
'appendChild()' 메서드 JavaScript 코드
이제 실제로 JavaScript 'appendChild()' 메서드를 살펴보십시오.
< 스크립트 >기능 myFunc1 ( ) {
을 위한. 추가 어린이 ( '
추가된 문자열
' ) //DOM 문자열 추가} 기능 myFunc2 ( ) {
const 요소 = 문서. createElement ( '저것' ) ;
const 마디 = 문서. createTextNode ( '추가 항목' ) ;
요소. 추가 어린이 ( 마디 ) ; //DOM 노드 추가
const 요소 = 문서. getElementById ( '목록' ) ;
요소. 추가 어린이 ( 요소 ) ;
}
스크립트 >
위의 코드 조각에서:
- 함수 이름 정의 ' myFunc1 ()”는 'appendChild()' 메서드를 사용하여 추가된 단락에 주어진 문자열을 추가합니다.
- 다음으로 ' myFunc2 ()' 함수에서 'createElement()' 메서드는 새 목록 요소를 만든 다음 'createTextNode()' 메서드를 사용하여 일부 텍스트를 추가합니다.
- 그런 다음 'appendChild()' 메서드를 사용하여 생성된 목록 노드에 텍스트를 추가합니다.
- 마지막으로 'appendChild()' 메서드를 사용하여 id가 'list'인 액세스된 정렬된 목록에 새로 생성된 목록 노드를 추가합니다.
산출
보시다시피 버튼 클릭 시 'String'이 아닌 'Node' 개체만 추가됩니다.
오류
'F12'를 눌러 웹 콘솔을 열고 문제를 검사합니다.
표시된 대로 콘솔은 'appendChild()' 메서드를 사용하여 String 개체를 추가할 때 오류를 표시합니다. 따라서 “appendChild()” 메소드는 String 객체를 추가하지 않는 것을 확인하였다.
차이점 2: 여러 노드 객체에 jQuery append() 및 JavaScript appendChild() 메서드 적용
'append()'와 'appendChild()' 메서드의 두 번째 차이점은 여러 노드 개체에 대해 이러한 메서드를 수행하여 분석할 수 있습니다. 실제 구현을 보려면 주어진 코드를 따르십시오.
HTML 코드
HTML 코드를 살펴보겠습니다.
< 사업부 ID = '메인 사업부' >< 사업부 스타일 = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > 하나 < / 사업부 >
< 사업부 스타일 = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > 둘 < / 사업부 >
< 사업부 스타일 = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > 삼 < / 사업부 >
< / 사업부 >
여기에서 위의 코드 행에는 id가 'main-div'인 기본 '
메모 : 'append()' 메소드와 'appendChild()' 메소드의 두 번째 차이점은 위에서 작성한 HTML 코드를 따른다.
append() 메서드
이제 다음 스크립트를 진행합니다.
< 스크립트 >const 메인디브 = 문서. getElementById ( '메인 사업부' ) ;
const div4 = 문서. createElement ( '사업부' ) ;
div4. innerHTML = '포' ;
div4. 스타일 . 배경색 = '분홍색' ;
div4. 클래스리스트 . 추가하다 ( '사업부' ) ; const div5 = 문서. createElement ( '사업부' ) ;
div5. innerHTML = '다섯' ;
div5. 스타일 . 배경색 = '분홍색' ;
div5. 클래스리스트 . 추가하다 ( '사업부' ) ;
maindiv. 추가 ( div4 , div5 ) ;
스크립트 >
위의 코드 조각에서:
- 'maindiv' 변수는 'getElementById()' 메서드의 도움으로 'main-div' id를 사용하여 추가된 'div'에 액세스합니다.
- 다음으로 'createElement()' 메서드는 새로운 'div' Node 객체를 생성하고 'innerHTML' 속성을 사용하여 지정된 텍스트를 추가하고 'style.backgroundcolor' 속성을 통해 배경색을 적용합니다.
- 그런 다음 'add()' 메서드는 'classList' 속성을 사용하여 지정된 클래스 CSS 속성을 추가합니다.
- 다음에 새로 생성되는 “” 요소에 대해서도 동일한 절차를 따릅니다.
- 마지막으로 'append()' 메서드를 사용하여 새로 생성된 두 Node 개체를 동시에 추가합니다.
산출
여기에서 새로 생성된 여러 Node 개체는 그에 따라 동일한 부모 요소에 추가됩니다.
'appendChild()' 메서드
다음으로 'appendChild()' 메서드를 계속 진행합니다.
< 스크립트 >
maindiv. 추가 어린이 ( div4 ) ;
maindiv. 추가 어린이 ( div5 ) ;
스크립트 >보시다시피 'appendChild()' 메서드는 여러 Node 개체를 동일한 부모 요소에 하나씩 추가합니다.
산출
출력은 'append()' 메서드와 동일하지만 Node 객체를 지정한다는 점에서 다릅니다.
차이점 3: 적용된 jQuery append() 및 JavaScript appendChild() 메서드의 반환 값
마지막 차이점은 'append()' 및 'appendChild()' 메서드의 '반환 값'입니다. 실전에서 봅시다.
메모 : HTML 코드는 차이점 2(Multiple Node Objects)와 동일합니다.
'추가()' 메소드
주어진 코드 줄을 살펴보십시오.
< 스크립트 >
콘솔. 통나무 ( maindiv. 추가 ( div4 ) ) ;
스크립트 >여기서 “console.log()” 메서드는 지정된 Node 객체를 추가하면서 “append()” 메서드의 반환 값을 확인하기 위해 적용됩니다.
산출
'F12'를 눌러 웹 콘솔을 엽니다.
보시다시피 'append()' 메서드의 반환 값은 ' 한정되지 않은 '.
AppendChild() 메서드
이제 'appendChild()' 메서드를 사용하는 다음 코드를 고려하십시오.
< 스크립트 >
콘솔. 통나무 ( maindiv. 추가 어린이 ( div4 ) ) ;
스크립트 >'append()' 메서드와 동일한 'console.log()' 메서드로 'appendChild()' 메서드를 지정합니다.
산출
여기에서 출력은 대신 스타일링 속성을 포함하여 추가된 요소 HTML을 반환합니다.
결론
jQuery ' 추가 ()' 및 자바스크립트 ' 추가 어린이 ()” 방법은 그들의 “ 구문”, “사용법” 및 “여러 노드 개체 '. 게다가 그들의 “ 반환된 값 '도 서로 다릅니다. 두 방법 모두 유용하며 사용법은 사용자의 선택에 따라 다릅니다. 이 가이드는 jQuery ' 추가 ()' 및 자바스크립트 ' 추가 어린이 ()” 방법을 실질적으로 사용합니다.