JavaScript의 내부 HTML에 대해 알아야 할 모든 것

JavaScript는 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 또한 플랫폼 전반에 걸친 다양성으로 인해 매우 인기가 있습니다. 다른 속성이 있습니다 동적 웹 사이트를 더 쉽게 구축 할 수 있습니다. 이 기사에서는 다음 순서로 JavaScript의 내부 HTML에 대해 설명합니다.

• 자바 스크립트 소개
• JavaScript의 내부 HTML
  • 정렬되거나 정렬되지 않은 목록
  • URL 변경

자바 스크립트 소개

JavaScript는 클라이언트 측 프로그래밍 언어와 서버 측 프로그래밍 언어로 사용됩니다. 실행하는 데 사용됩니다. 모든 애플리케이션의 클라이언트 측과 서버 측에서. 노드는 여러 위치에서 Node.js라고도합니다.

double을 int로 변환하는 Java

JavaScript는 여러 기능을 쉽게 수행 할 수 있도록 다양한 방법을 제공합니다. 이것이 JavaScript를 가장 인기있는 프로그래밍 언어로 만들었으며 여러 종류의 제품 개발에서 널리 사용되고 있습니다.

JavaScript의 내부 HTML

내부 JavaScript의 속성은 매우 편리한 기능 중 하나이며 생성되는 웹 페이지에보다 동적이고 다양한 측면을 제공하는 데 널리 사용됩니다.

innerHTML을 간단히 설명하려고하면 innerHTML이 수행하는 작업은 전체 페이지를 새로 고치지 않고 페이지 콘텐츠를로드하는 것입니다. 이렇게하면 데이터 사용량과 페이지로드 시간을 절약 할 수 있으며 획득하기가 매우 쉽습니다. 이것은 사용자에게 매우 빠르고 반응적인 느낌을 제공하여 사용자 경험을 훨씬 더 좋게 만듭니다.

조금 어렵게 들릴지 모르지만 예를 들어 이해해 봅시다.

예:

 
innerHTML 텍스트를 변경하려면 여기를 클릭하십시오.
function myFunction () {document.getElementById ( 'paragraph1'). innerHTML = '단락이 변경되었습니다!' }

위의 코드에서 단락 태그의 ID는 단락 1입니다.

이있다 함수 myfunction ()이라는 이름은 'innerHTML 텍스트를 변경하려면 여기를 클릭하십시오'라는 텍스트를 클릭하면 취소됩니다.클릭시 함수가 취소되면, 데모로 Id가있는 요소를 선택하도록 명시한 getElementById ( 'paragraph1')라는 함수가 실행됩니다.

또한, 우리는 단순히 onclick 후에 수행 할 작업을 의미하는 innerHTML 함수를 가지고 있습니다. 위의 예에서는 단순히 'Paragraph Changed'입니다.

아래는 위 코드의 초기 출력입니다.

아래는 클릭 후 변경된 출력입니다.

정렬되거나 정렬되지 않은 목록이있는 내부 HTML

다음은 정렬되거나 정렬되지 않은 목록과 함께 innerHTML의 사용을 보여주는 예입니다.

예:

 
 
안녕하세요
 
또 안녕
 
 
ul 요소의 내용을 보려면 아래 버튼을 클릭하십시오.
사용해보세요 function helloFunction () {var x = document.getElementById ( 'myList'). innerHTML document.getElementById ( 'paragraph1'). innerHTML = x}

여기서 innerHTML은 'Try it'이라는 이름으로 정의 된 버튼에 의해 트리거됩니다.

위 텍스트의 초기 출력은 다음과 같습니다.

버튼을 클릭 한 후의 출력. 버튼을 클릭해도 페이지가 새로 고침되는 것이 아니라 innerHTML을 사용했기 때문입니다.

URL 변경을위한 InnerHTML

다음은 버튼 클릭시 URL을 변경하기 위해 innerHTML을 사용하는 방법을 보여주는 또 다른 예입니다.

예:

  위키 백과 링크 변경 함수 myFunction () {document.getElementById ( 'myAnchor'). innerHTML = 'Google'document.getElementById ( 'myAnchor'). href = 'https://www.google.com'document.getElementById ( 'myAnchor' ) .target = '_blank'}

위의 예는 처음에 Wikipedia 웹 사이트에 대한 링크를 제공하지만 버튼을 클릭하면 링크가 Google로 변경됩니다.

페이지를 다시로드하지 않고 일부만 업데이트 할 때 innerHTML이 유용한 여러 작업이 있습니다.이렇게하면 시간을 절약 할 수있을뿐만 아니라 접근 방식을위한 노력도 줄일 수 있습니다.innerHTML의 가장 큰 장점은이 기능으로 향상된 사용자 경험입니다.

확인 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.

질문이 있으십니까? 'JavaScript의 문자열 연결'의 주석 섹션에 언급 해 주시면 다시 연락 드리겠습니다.

피보나치 알고리즘 C ++