JavaScript를 사용하여 HTML 페이지에 요소를 가로로 추가하는 방법은 무엇입니까?

JavaScript의 "createElement" 메소드를 사용하여 새 요소를 생성할 수 있습니다. 그런 다음 "appendChild" 메소드를 사용하여 HTML 페이지의 상위 요소에 해당 요소를 추가할 수 있습니다. 요소를 수평으로 배치하려면 새로 생성된 요소에 "display:inline-block" 또는 "float:left/right"와 같은 CSS 스타일을 사용할 수 있습니다.

연결된 목록 데이터 구조의 그래픽 표현을 설명한다고 가정해 보겠습니다. 사용자가 버튼을 클릭할 때마다 새 노드(이 예에서는 녹색 원으로 표시됨)가 노드 목록 앞에 수평으로 추가되어야 합니다.

그리고 녹색 원 안의 텍스트는 해당 특정 노드의 색인이어야 합니다.

방법

여기의 방법은 매우 간단하고 간단합니다−

• 새 노드를 삽입하는 버튼을 만들어 보겠습니다.

• 버튼을 클릭할 때마다 노드 수가 1씩 증가합니다.

• 노드 렌더링을 담당하는 별도의 함수는 해당 개수를 수신하고 노드를 렌더링합니다.

• 노드를 역순으로 렌더링하기 위해 컨테이너 div의 flex-direction 속성을 row-reverse로 설정합니다.

Example

이것은 이 접근 방식의 완전한 작업 예입니다. -

Explanation

Explanation

우리는 연결된 목록의 간단한 그래픽 표현을 만들기 위해 JavaScript를 사용하여 기본 HTML 파일을 만들었습니다. 클릭하면 연결된 목록에 새 노드(요소)를 삽입하고 그래픽 표현을 업데이트하는 함수를 호출하는 버튼이 있습니다.

그래픽 표현은 클래스 이름이 "element"인 div 요소를 사용하여 생성되며 원 모양으로 스타일이 지정됩니다. 요소는 "id"가 "holder"인 플렉스 컨테이너에 표시되며, 뷰포트에 요소가 너무 많을 때 스크롤할 수 있도록 Overflow-x:scroll로 설정됩니다.

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