JavaScript의 문자열에서 요소를 만드는 방법은 무엇입니까?

이 튜토리얼에서는 JavaScript의 문자열에서 요소를 생성하는 다양한 방법을 살펴보겠습니다. 웹사이트를 대화형으로 만들기 위해 요소를 동적으로 생성해야 하는 경우 문자열에서 요소를 생성하는 것은 매우 유용할 수 있습니다. 예를 들어 할 일 항목을 추가, 삭제 및 편집하는 할 일 목록 앱과 같습니다.

createElement() 메서드

우리는 createElement() 메소드를 사용하여 JavaScript 항목을 생성합니다. 특정 요소를 생성하려면 항목 이름을 문자열로 createElement() 메서드에 전달합니다.

createElement(tagName) 함수에는 이 메서드를 사용하여 생성될 태그 이름으로 하나의 매개변수가 있습니다. 여기서 tagName은 매개변수 이름이며 문자열 형식입니다. 문자열에서는 하나의 요소만 생성됩니다.

문법

으아아아

tagName 위치에 p(단락), h1(제목 1), img (이미지)와 같은 태그 이름을 전달합니다. createElement는 tagName을 소문자로 만들기 때문에 대소문자에 대해 걱정할 필요가 없습니다.

단계

• 1단계 - h3 및 p와 같은 요소 값을 사용하여 문자열을 만듭니다.

• 2단계 - 문자열을 createElement() 메소드에 매개변수로 전달합니다. 변수에 값을 할당합니다. 그러면 필요한 요소가 생성됩니다.

• 3단계 - 요소를 생성한 후 innerText 속성을 사용하여 두 요소에 필수 텍스트를 할당합니다.

• 4단계 - 결국 추가는 웹 사용자가 볼 수 있도록 생성된 요소를 웹 페이지에 추가하기 위해append() 또는appendChild() 메서드를 사용합니다.

문자열로 제목과 단락을 만들어 보겠습니다.

으아아아

따라서 요소를 생성하는 방법을 이해해야 하지만 요소를 생성하는 것은 DOM의 일부가 아니기 때문에 해당 요소를 사용자에게 표시하는 데 도움이 되지 않습니다. 대신 요소를 DOM의 일부로 첨부하여 DOM의 일부로 만들어야 합니다.

그래서 우리는 append() 및 appendChild()와 같은 몇 가지 메서드를 사용합니다.

예

append() 메서드를 사용하여 생성된 요소를 추가합니다.

아래 예에서는 문서 createElement() 메서드를 사용하여 두 개의 요소 h3과 p를 만들었습니다. 그런 다음 이러한 요소에 일부 텍스트를 할당하고 add() 메서드를 사용하여 해당 요소를 DOM에 추가합니다. 마지막으로 innerHTML 속성을 사용하여 요소를 표시합니다.

으아아아

예

appendChild() 메서드를 사용하여 생성된 요소를 추가합니다.

아래 예에서는 문서의 createElement() 메서드를 사용하여 두 개의 요소 h3과 p를 만듭니다. 그런 다음 이러한 요소에 일부 텍스트를 할당하고 appendChild() 메서드를 사용하여 해당 요소를 DOM에 추가합니다. 마지막으로 innerHTML 속성을 사용하여 요소를 표시합니다

으아아아

이제 위 프로그램의 출력은 동일하지만 두 프로그램의 차이점은 무엇이라고 생각하시나요?

그렇습니다. 둘 다 HTML 문서에 노드를 추가하는 데 사용되지만, 경우에 따라append() 메서드는 추가된 노드를 반환하지만 appendChildI() 메서드는 아무것도 반환하지 않습니다.

append() 메서드를 사용하면 한 번에 여러 요소를 추가할 수 있지만 appendChild() 메서드에서는 한 번에 하나의 요소만 추가할 수 있습니다.

좋아요

으아아아

이것은

과 동일한 작업을 수행합니다. 으아아아

append() 메소드를 사용하면 DOMString 및 DOMNodes를 모두 상위 요소에 추가할 수 있지만 이 경우에는 appendChild() 메소드 DOMNodes만 상위 요소에 추가할 수 있습니다.

다음은 문자열에서 요소를 생성할 수 있는 몇 가지 방법입니다.

위 내용은 JavaScript의 문자열에서 요소를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!