JavaScript의 append() 메서드는 무엇입니까

Javascriptui Append Meseodeuneun Mueos Ibnikka



목록을 만들고 여러 요소를 추가한다고 가정합니다. 수동으로 할 경우 많은 시간이 소요됩니다. 이를 위해 JavaScript는 ' 추가() ” 개체를 인수로 가져온 다음 정의된 목록의 끝에 삽입하는 메서드입니다. 또한 목록 또는 단락 형식과 같이 요소를 다르게 추가할 수도 있습니다.

이 게시물은 JavaScript 개체 배열에서 개체 ID를 찾는 방법을 설명했습니다.

JavaScript에서 append() 메서드는 무엇입니까?

추가() 요소 또는 문자열 객체를 요소 끝에 삽입하는 데 JavaScript의 ” 메서드를 사용합니다. 이는 요소 끝의 지정된 위치에 필요한 요소를 추가하는 가장 유용한 방법 중 하나입니다.







JavaScript에서 append() 메서드를 사용하는 방법은 무엇입니까?

JavaScript에서 append() 함수를 활용하려면 아래 언급된 구문을 따르십시오.



( 선택자 ) . 추가 ( 내용, 기능 ( 색인, HTML ) )

여기:



  • 선택자 ”는 액세스되는 HTML 요소입니다.
  • 추가() ” 메서드는 요소를 추가하는 데 사용됩니다.
  • 콘텐츠 ”는 추가할 데이터 콘텐츠를 결정하는 필수 매개 변수입니다.
  • 기능() '는 선택적 요소입니다.

예 1: 단락에 동일한 요소 추가

단락에 동일한 요소를 추가하려면 먼저 해당 HTML 페이지를 열고 '

” 태그 사이에 데이터를 삽입합니다. 또한 ' ID '를 단락에 추가하여 JavaScript에서 액세스하십시오.





< 아이디 = '요소' > 리눅스힌트에 오신 것을 환영합니다 >

다음으로 ' <버튼> ” 요소를 제거하고 “ 수업 ” 속성을 사용하여 특정 이름을 지정하고 버튼에 표시할 버튼 요소가 있는 텍스트를 포함합니다.

< 단추 수업 = 'btn' > 요소 추가 단추 >

이제 ' <스크립트> ” 태그를 사용하여 JavaScript 코드를 추가합니다.



< 스크립트 >

$ ( 문서 ) . 준비가 된 ( 기능 ( ) {

$ ( '.btn' ) . 딸깍 하는 소리 ( 기능 ( ) {

$ ( '#요소' ) . 추가 ( '버튼 클릭 시 텍스트 추가' ) ;

} ) ;

} ) ;

스크립트 >

주어진 코드에 따르면:

  • 준비가 된() ” 메서드는 문서가 화면에 성공적으로 로드되었을 때 기능을 사용할 수 있도록 하는 데 사용됩니다. 이렇게 하려면 ' 기능() ” 메서드를 매개변수로 사용합니다.
  • 딸깍 하는 소리() ” 메서드는 사용자가 HTML 버튼 요소를 클릭할 때 호출됩니다. 이 메서드는 사용자가 버튼을 누를 때 클릭 실행을 결정합니다.
  • 추가() ” 메서드는 “ 딸깍 하는 소리() ' 방법. 이를 위해 추가해야 하는 텍스트를 전달합니다.

산출

예 2: 목록 형식에서 다른 요소 추가

목록 형식으로 다른 요소를 추가할 수 있습니다. 이렇게 하려면 HTML 페이지를 만들고 '

” 태그:

< 아이디 = '추가' > 자바스크립트 추가 ( ) 기능 >

'를 사용하여 버튼을 만듭니다. <버튼> ” 요소를 제거하고 “ 온 클릭 ” 사용자가 HTML 요소를 클릭할 때 발생하는 이벤트:

< 버튼 클릭 = '기능()' > 요소 추가 단추 >

div 컨테이너를 만들고 ' ID ' 기인하다. 다음으로 '의 도움으로 요소를 추가하십시오.

” 태그:

< 사업부 ID = '더 많은 요소' >

< > 요소 1 >

< > 요소 2 >

사업부 >

다음으로 ' <스크립트> ” 태그를 지정하고 태그 사이에 다음 코드를 추가합니다.

< 스크립트 >

변수 요소 번호 = ;

기능 기능 ( ) {

부모였다 = 문서. getElementById ( '더 많은 요소' ) ;

newElement였습니다 = '

요소' + 요소 번호 + '

'
;

부모의. insertAdjacentHTML ( '전에' , 및 요소 ) ;

요소 번호 ++;

}

스크립트 >

위에서 언급한 코드에서:

  • '를 사용하여 변수를 선언합니다. ~였다 ” 키워드를 선택하고 선호도에 따라 값을 지정하십시오.
  • 함수를 정의하고 정의된 함수 내부의 다른 변수를 특정 이름으로 초기화합니다.
  • 그런 다음 ' getElementById() ” 요소에 액세스하고 id 값을 매개 변수로 전달하는 JavaScript 메서드입니다.
  • insertAdjacentHTML() ” 메서드는 HTML 코드를 지정된 위치에 추가하고 서로 인접한 요소를 추가하는 데 사용됩니다.
  • 증가 연산자를 사용하여 요소를 증가시킵니다.

다양한 예제를 통해 JavaScript에서 append() 메서드의 사용법에 대해 배웠습니다.

결론

추가() ”는 정의된 요소의 끝에 요소와 객체를 삽입하기 위해 활용되는 자바스크립트 방식입니다. 동일한 요소와 다른 요소를 단락 및 목록 형식으로 추가할 수 있습니다. 보다 구체적으로, 버튼 클릭 시 트리거될 수 있습니다. 이 게시물은 JavaScript에서 append() 메서드를 시연했습니다.