JavaScript를 사용하여 여러 요소를 결합하고 결과를 div에 추가하는 방법은 무엇입니까?

때로는 HTML 요소를 조작하기 위해 JavaScript를 사용해야 할 때가 있습니다. 따라서 JavaScript를 사용하여 HTML 요소를 추가하거나 제거할 수 있습니다. 이 튜토리얼에서는 JavaScript를 사용하여 한 장면에 여러 HTML 요소를 결합하는 방법을 설명합니다.

때로는 사용자가 버튼을 클릭하거나 특정 이벤트 트리거를 클릭할 때 일부 HTML 요소를 사용자에게 표시해야 하는 경우가 있습니다. 따라서 아래 방법을 사용하여 여러 요소를 결합하고 JavaScript를 사용하여 결과를 div 요소에 추가할 수 있습니다.

innerHTML 속성을 사용하세요

innerHTML은 이름에서 알 수 있듯이 JavaScript를 사용하여 특정 요소의 HTML을 설정할 수 있습니다. innerHTML 속성과 함께 할당 연산자를 사용하면 특정 요소의 HTML이 대체됩니다.

innerHTML 속성과 함께 += 연산자를 사용하면 특정 HTML 요소에 여러 요소를 추가할 수 있습니다.

문법

다음 구문에 따라 innerHTML 속성을 사용하여 여러 요소를 결합하고 이를 div 요소에 추가할 수 있습니다.

으아아아

위 구문에서 test_div는 JavaScript를 통해 액세스되는 HTML 요소입니다.

예

아래 예에서는 5번의 for 루프 반복을 수행합니다. innerHTML 속성을 사용하여 각 루프 반복마다 div 요소에 일부 HTML을 추가합니다.

으아아아

JQuery의 Append() 메소드를 사용하세요

JQuery의 Append() 메소드를 사용하여 특정 요소에 HTML을 추가할 수 있습니다. 특정 HTML 요소에 여러 요소를 추가하기 위해 Append() 메서드를 여러 번 사용할 수 있습니다.

문법

사용자는 아래 구문에 따라 jQuery의 Append() 메서드를 사용하여 특정 HTML 요소에 여러 HTML 요소를 추가할 수 있습니다.

으아아아

위 구문에서 html은 HTML 요소 끝에 추가되는 여러 또는 단일 요소를 포함하는 html 줄입니다.

예

아래 예에서는 사용자가 버튼을 클릭하면 AppendHTML() 함수가 호출됩니다. AppendHTML() 함수에서는 루프를 사용하여 여러 HTML 요소를 특정 요소에 추가합니다. 사용자는 각 루프 반복마다 새 HTML 요소를 추가하기 위해 JQuery add() 메서드를 사용하는 것을 볼 수 있습니다.

으아아아

위 출력에서 ​​사용자는 버튼을 클릭하면 ID가 "content"인 div 요소에 HTML 요소가 추가되는 것을 볼 수 있습니다.

JavaScript의 after() 메소드를 사용하세요

JavaScript에는 특정 요소 뒤에 HTML 요소를 추가하기 위한 after() 메서드가 포함되어 있습니다. 쉼표로 구분된 HTML 줄을 전달하거나 JavaScript의 after 요소를 after() 메서드에 대한 인수로 생성할 수 있습니다.

문법

사용자는 아래 구문에 따라 여러 요소를 단일 요소로 결합하는 대신 JavaScript의 after() 메서드를 사용하여 HTML 요소에 여러 요소를 추가할 수 있습니다.

으아아아

매개변수

• elements - 특정 HTML 요소 뒤에 추가된 쉼표로 구분된 여러 HTML 요소입니다.

예

아래 예시에서는 사용자가 버튼을 클릭하면 concatElements() 함수가 실행됩니다. concatElements() 함수에서는 createElement() 메소드를 사용하여 HTML 요소를 생성하고 innerHTML 속성을 사용하여 HTML을 추가합니다.

그런 다음 element1과 element2를 after() 메서드의 매개변수로 전달하여 div 요소 뒤에 추가합니다.

으아아아

사용자는 JavaScript에서 여러 HTML 요소를 결합하고 결과 요소를 HTML 요소에 추가하는 세 가지 방법을 배웠습니다. 첫 번째 방법에서 사용자는 += 연산자를 사용하여 단일 변수에 여러 요소를 저장할 수 있으며, 그런 다음 결과 요소의 값을 innerHTML 속성에 할당할 수 있습니다.

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