Javascript로 HTML DOM 요소 생성
HTML 요소란 무엇입니까?
HTML 요소는 첫 번째 태그에서 태그 끝까지의 모든 것을 포함합니다. 예를 들어,
<p>A paragraph</p>일부 HTML 파일에는 단락 태그
<p></p> 또는 이미지 태그<img>와 같은 태그가 포함되지 않습니다. HTML 파일을 건드리지 않고 페이지에 무엇이든 추가하려면 javascript로 HTML 태그를 만드는 방법을 알아야 합니다.Javascript로 HTML DOM 요소를 어떻게 생성합니까?
코드 예제와 관련하여 이 HTML 코드를 사용합니다.
<body>
<div id='create-cat'></div>
</body>
1)
document.createElement("x")를 사용하여 요소를 생성합니다.X는 생성하려는 모든 요소를 나타냅니다.
예를 들어 요소
<img>를 생성하려는 경우변수로 선언하고 다음을 입력합니다.
let imgTag = document.createElement("img")
2) append 태그
<img>를 원하는 위치를 선택합니다. 이 경우 <div> 태그에 추가하십시오. 나중에 다시 참조할 수 있도록 변수로 선언합니다. 그렇게 하려면 다음을 입력합니다.let catCreation = document.querySelector("#create-cat")
3) 이제 div 태그 아래에
<img> 태그를 실제로 추가하려면 다음을 입력합니다.catCreation.append(imgTag)
이렇게 하면 HTML DOM의 코드가 다음과 같이 표시됩니다.
<body>
<div id='create-cat'></div>
<img>
</body>
4) 이미지를 표시하려면 이미지의 소스 경로를 포함해야 합니다. 따라서
<img> 태그를 만드는 데 사용한 변수 이름을 입력합니다. 뒤에 .src를 입력하고 이미지 파일 또는 링크와 동일하게 설정합니다. 아래 예를 참조하십시오.imgTag.src="img.cat_jpg"
이제 고양이 이미지가 표시되고 HTML DOM이 다음과 같이 표시됩니다.
<body>
<div id='create-cat'></div>
<img src="img.cat.jpg">
</body>
성공! 공식적으로 새 HTML DOM 요소를 만들고 추가했습니다. 행운을 빕니다!
표지 이미지 출처: https://www.canto.com/blog/insert-image-html/
Reference
이 문제에 관하여(Javascript로 HTML DOM 요소 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/josephineluu/creating-html-dom-elements-with-javascript-11mm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
