JavaScript를 사용하여 HTML 요소를 다른 요소로 바꾸는 방법은 무엇입니까?

이 튜토리얼에서는 JavaScript를 사용하여 HTML 요소를 다른 요소로 바꾸는 방법을 배웁니다.

일부 사용 사례에서는 전체 HTML 요소를 다른 요소로 교체해야 합니다. 예를 들어 양식 유효성 검사에서는 매우 중요합니다. 양식에서 사용자의 나이를 얻었고 사용자가 잘못된 나이를 입력했다고 가정하면 HTML 요소를 대체하여 유효성 검사 메시지를 표시할 수 있습니다. HTML 요소를 다른 HTML 요소로 대체해야 하는 또 다른 사용 사례는 위치 등과 같은 특정 조건에 따라 웹 페이지 콘텐츠를 표시해야 하는 동적 콘텐츠 로딩입니다.

여기에서는 웹페이지의 HTML 요소를 바꾸는 3가지 방법을 알아봅니다.

replaceWith() 메소드를 사용하세요

첫 번째 방법은 replacementWith() 메서드를 사용합니다. 이전 요소를 참조로 사용하고 새 요소를 참조로 전달하여 replacementWith() 메서드를 실행해야 합니다. 문자열 형식으로 새 요소를 만들 수 있습니다.

문법

사용자는 다음 구문에 따라 하나의 HTML 요소를 다른 HTML 요소로 바꾸기 위해 replacementWith() Javascript 메서드를 사용할 수 있습니다.

으아악

위 구문에서 oldElement는 교체 가능한 요소이고 newElement는 교체된 요소입니다.

예

아래 예에는 ID "oldElement"를 포함하는 HTML의 div 요소가 있습니다. 버튼을 클릭하면 바꾸기 요소() 함수를 호출합니다. replacementElement() 함수에서는 createElement() 메소드를 사용하여 새로운 "h2" 요소를 생성합니다. 또한 textContent 속성을 사용하여 새로 생성된 HTML 요소에 콘텐츠를 추가합니다. 그런 다음, replacementWith() 메소드를 사용하여 oldElement를 newElement로 교체합니다.

출력에서 사용자는 버튼을 클릭하고 웹페이지의 변경 사항을 확인할 수 있습니다.

으아악

outerHTML 속성을 사용하세요

모든 요소의 externalHTML 속성을 사용하면 전체 HTML 요소를 다른 HTML 요소로 바꿀 수 있습니다. HTML 요소를 대체하려면 externalHTML 속성에 새 요소 값을 할당해야 합니다.

문법

사용자는 다음 구문에 따라 externalHTML 속성을 사용하여 하나의 HTML 요소를 다른 HTML 요소로 바꿀 수 있습니다.

으아악

예

아래 예에서는 "para" ID와 일부 텍스트 콘텐츠가 포함된 "

" 요소를 만들었습니다. replacementElement() 함수에서는 문자열 형식으로 새 HTML 요소를 생성하고 해당 값을 "

" 요소의 externalHTML 속성에 할당합니다.

출력에서 사용자는 버튼을 클릭하여 "

" 요소를 "

" HTML 요소로 교체해야 합니다. 으아악

예

아래 예에서는 다양한 옵션이 포함된 선택 메뉴를 만들었습니다. 여기서는 선택 메뉴의 특정 옵션을 대체하겠습니다. 또한 두 개의 입력 필드를 만듭니다. 하나는 인덱스 번호를 가져오는 것이고, 다른 하나는 사용자의 새로운 옵션 값을 가져오는 것입니다.

replaceOption() 함수에서는 사용자로부터 새로운 입력 값을 얻습니다. 그런 다음 사용자가 입력에 입력한 인덱스 값을 사용하여 옵션에 액세스합니다. 다음으로 옵션의 externalHTML 속성을 사용하여 옵션을 새 값으로 바꿉니다.

출력에서 첫 번째 입력 필드에 0부터 시작하는 인덱스 값을 입력하고 두 번째 입력 필드에 새 옵션 값을 입력한 후 버튼을 클릭하여 옵션을 교체합니다.

으아악

replaceChild() 메소드를 사용하세요

replaceChild() 메서드를 사용하면 개발자가 특정 HTML 요소의 하위 노드를 새 요소로 바꿀 수 있습니다. 여기에서 특정 요소의 첫 번째 하위 요소를 새 요소로 대체할 수 있습니다.

문법

사용자는 다음 구문에 따라 replacementChild() 메서드를 사용하여 하나의 HTML 요소를 다른 HTML 요소로 바꿀 수 있습니다.

으아악

위 구문에서는 새 요소를 replacementChild() 메서드의 첫 번째 매개 변수로 전달하고 이전 요소를 두 번째 매개 변수로 전달해야 합니다.

예

아래 예에서는 먼저 createElement() 메서드를 사용하여 "h3" 요소를 생성합니다. 그런 다음 createTextNode() 메서드를 사용하여 텍스트 콘텐츠를 생성합니다. 그런 다음,appendChild() 메소드를 사용하여 새로 생성된 HTML 요소에 텍스트 노드를 추가합니다.

다음으로 이전 요소를 참조하여 replacementChild() 메서드를 실행합니다. 또한 HTMLele을 첫 번째 매개변수(새로 생성된 요소)로 전달하고 oldEle.childNodes[0]를 두 번째 매개변수(자체를 나타내는 이전 요소의 첫 번째 하위 요소)로 전달했습니다.

출력에서 버튼을 클릭하고 웹페이지의 변경 사항을 확인하세요.

으아악

JavaScript를 사용하여 하나의 HTML 요소를 다른 요소로 바꾸는 세 가지 방법을 배웠습니다. 첫 번째 방법에서는 가장 간단하고 좋은 방법 중 하나인 replacementWith() 메서드를 사용했습니다. 두 번째 방법에서는 externalHTML 속성을 사용하고, 세 번째 방법에서는 일반적으로 하위 요소를 대체하는 데 사용되는 replacementChild() 메서드를 사용합니다.

위 내용은 JavaScript를 사용하여 HTML 요소를 다른 요소로 바꾸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!