이번 글에서는 JavaScript를 통해 HTML 요소를 생성하는 방법에 대해 설명하겠습니다. 여기에서는 생성된 요소를 문서에 삽입하는 몇 가지 예를 살펴보겠습니다.
HTML로 요소를 생성하는 것이 요소를 생성하는 유일한 방법은 아닙니다. 그러나 단순화를 위해 HTML 문서에서 직접 요소를 생성하는 경우가 많지만 JavaScript를 사용하여 요소를 생성하는 것도 가능합니다.
그만큼 document.createElement() JavaScript를 통해 지정된 이름을 가진 HTML 요소 노드를 동적으로 생성하는 데 사용됩니다. 이 메소드는 요소 이름을 매개변수로 사용하고 해당 요소 노드를 작성합니다.
요소를 생성한 후,appendChild() 메서드나 insertBefore() 메서드를 사용하여 생성된 요소를 문서에 삽입할 수 있습니다.
우리는 제거자식() 노드를 제거하는 방법과 다음을 사용할 수도 있습니다. 대체자식() 노드를 교체하는 방법입니다.
통사론
document.createElement(nodename);
이 메소드는 다음과 같이 명시된 단일 매개변수 값을 허용합니다.
CSS를 중앙으로 보내는 버튼
노드 이름: 필수 매개변수입니다. 이 매개변수는 문자열 유형입니다. 이는 우리가 생성해야 하는 요소의 이름을 지정합니다. 매개변수에 지정된 요소 이름은 요소를 생성합니다. 그렇지 않고 지정된 요소의 이름이 인식되지 않으면 알 수 없는 HTML 요소가 생성됩니다.
그만큼 document.createElement() 새로 생성된 요소를 반환합니다.
이제 몇 가지 사용 예를 살펴보겠습니다. document.createElement() 방법. 여기서는 두 가지 예를 보여드리겠습니다. 첫 번째 예에서는 추가자식() 문서에 요소를 삽입하는 방법을 사용하고 두 번째 예에서는 삽입앞() 생성된 요소를 삽입하는 메서드 document.createElement() 방법.
실시예 1
이 예에서는 document.createElement() 새 버튼 요소를 만드는 방법입니다. 생성된 요소를 다음을 사용하여 삽입하겠습니다. 추가자식() 방법. 여기에는 재미있는() 메소드를 사용하여 새 버튼 요소를 생성합니다. 생성요소() 방법. 우리는 다음을 사용하여 텍스트를 설정합니다. 내부 HTML 버튼 상단에 표시됩니다.
아래에 주어진 예를 살펴 보겠습니다.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button 지금 테스트해보세요 산출
위 코드를 실행한 후 출력은 다음과 같습니다.
주어진 버튼을 클릭하면 출력은 다음과 같습니다.
실시예2
이 예에서는 document.createElement() 새 버튼 요소를 만드는 방법입니다. 여기서는 삽입앞() 생성된 요소를 삽입하는 방법입니다. 단락 하위 요소가 있는 div 요소가 있습니다. 새 버튼 요소는 div 요소의 단락 하위 요소 앞에 삽입됩니다.
아래에 주어진 예를 살펴 보겠습니다.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button 지금 테스트해보세요 산출
위 코드를 실행한 후 출력은 다음과 같습니다.
위 버튼을 클릭하면 출력은 다음과 같습니다.
위 스크린샷은 새 버튼 요소가 단락 요소 앞에 삽입되는 것을 보여줍니다. 이는 우리가 다음을 사용했기 때문입니다. insertBeofre() 다음을 사용하여 생성된 새 요소를 삽입하는 방법 document.createElement() 방법.