이 자습서에서는 JavaScript를 사용하여 HTML 코드를 동적으로 작성하는 방법을 설명합니다.
JavaScript를 사용하여 동적으로 HTML 코드를 작성하는 방법은 무엇입니까?
JavaScript를 사용하여 HTML 코드를 작성하려면 다음 방법을 사용하십시오.
방법 1: document.createElement() 메서드를 사용하여 동적으로 HTML 코드 작성
자바스크립트의 ' 문서.createElement() ” 방법을 “ 텍스트 내용 ” 속성은 JavaScript에서 HTML 코드를 동적으로 작성하는 데 사용됩니다. createElement() 메서드를 사용하여 특정 HTML 요소를 생성할 수 있으며 textContent 속성을 사용하여 텍스트 콘텐츠를 설정합니다.
통사론
주어진 구문을 사용하여 JavaScript에서 HTML 요소를 생성합니다.
문서. createElement ( '태그이름' )
예시
여기에서 먼저 '로 전달된 HTML
태그를 사용하여 JavaScript 파일에 단락을 만듭니다 생성요소() ' 방법:
const 텍스트 = 문서. createElement ( '피' ) ;textContent 속성을 사용하여 단락의 텍스트를 설정합니다.
텍스트. 텍스트 내용 = 'Linuxhint에 오신 것을 환영합니다' ;
마지막으로 '를 사용하여 웹페이지에 텍스트를 인쇄합니다. 문서.쓰기() ' 방법:
문서. 쓰다 ( 텍스트. 텍스트 내용 ) ;여기 출력에서 JavaScript를 사용하여 웹 페이지에 텍스트를 성공적으로 작성하는 것을 볼 수 있습니다.
방법 2: innerHTML 속성을 사용하여 동적으로 HTML 코드 작성
HTML 코드를 동적으로 작성하려면 JavaScript ' innerHTML ' 특성. HTML 요소의 내용을 변경하는 가장 간단한 방법입니다. 모든 브라우저를 지원합니다.
통사론
innerHTML 속성을 사용하려면 주어진 구문을 따르십시오.
innerHTML = '텍스트'예시
HTML 파일에서 먼저 정의된 함수 '를 호출할 버튼을 만듭니다. 표제() 클릭 이벤트에 대한 JavaScript의 ”:
< 버튼 클릭 = '표제()' > 여기를 클릭하세요 단추 >JavaScript에서 텍스트가 표시될
태그를 사용하여 단락을 만들고 여기에 ID를 할당합니다.
< 아이디 = '표제' > 피 >함수 정의 ' 표제() ” JavaScript 파일에서. '의 도움으로 할당된 ID를 사용하여 HTML 요소의 참조를 가져옵니다. getElementById() ” 방법을 적용하고 “ innerHTML ” 속성:
기능 표제 ( ) {문서. getElementById ( '표제' ) . innerHTML = '
Linuxhint에 오신 것을 환영합니다
' ;}
산출
JavaScript를 사용하여 HTML 코드를 동적으로 작성하는 것과 관련된 모든 필수 정보를 컴파일했습니다.
결론
JavaScript에서 HTML 코드를 동적으로 작성하려면 ' 문서.createElement() ” 방법을 “ 텍스트 내용 ” 재산 또는 “ innerHTML ' 특성. 첫 번째 방법에서는 HTML 코드가 필요하지 않지만 innerHTML 속성에서는 HTML 요소에 액세스하고 작업을 수행해야 합니다. 이 자습서에서는 JavaScript를 사용하여 HTML 코드를 동적으로 작성하는 방법을 설명했습니다.