자바스크립트 html 태그 생성하고 추가하기 createElement prepend javascript

자바스크립트는 html 문서를 직접 조작하여 태그를 생성하고 붙일 수 있다. 이 작업을 위해 필요한 자바스크립트 메서드는 createElement 와 prepend 메서드 이다. 이 둘은 html의 dom 스크립트 부분으로 일반적인 자바스크립트 라이브러리가 아닌 내장 메서드이다.

html 생성과 추가

html 에서 태그를 생성하기 위해서 createElement 메서드를 사용한다.

생성된 html 태그를 특정 부분에 추가하기 위해선 prepend 메서드를 사용한다.

이 2개의 사용법은 아래와 같다.

// html 태그 생성
document.createElement("html 태그명")

// html 태그 추가
(타겟 태그).prepend(생성된 태그);

타겟 태그는 생성된 태그가 붙일 곳을 가리킨다.

코드를 작성해 보자

가장 기본적인 html 문서를 만들어 본다.

이전에 반응형과 관련된 기본 템플릿을 만들었다.

참고하자

▶ html5 기본 템플릿 만들기 template

아래 코드는 html 문서의 body 태그에 span 태그를 생성하여 추가하는 것이다.

querySelector 를 이용하여 추가할 태그를 선택한다.

createElement 로 태그를 생성한다.

prepend 로 태그를 추가한다. 단, prepend의 경우 붙일 태그의 바로 뒤에 붙기 때문에 사용에 주의해야 한다.

// 태그를 생성할 문서의 태그를 선택한다.
var targetTag = document.querySelector("body");

// 태그를 생성한다.
var addTag = document.createElement("span");
addTag.innerHTML = "추가한 span tag";

// 태그를 추가한다.
targetTag.prepend(addTag);

전체 코드와 결과화면을 보자

전체 코드는 아래와 같다.

자바스크립트는 개인적인 버릇이라 화면하단에 넣었다.

자바스크립트는 위에 넣어도 되고 밑에 넣어도 되고 어디에 넣어도 상관없지만 하단에 넣으면 나름대로 효과가 좋은 점이 있다.

<!-- html5 기본템플릿 -->
<!DOCTYPE html>

    <!-- head -->
    <head>
        
        <!-- meta SEO 컨텐츠 -->
        <meta name="title" content="제목">
        <meta name="description" content="내용">
        <meta name="keywords" content="키워드">
        <meta name="author" content="작성자">
        <meta name="copyright" content="저작권">
        <!-- // -->

        <!-- meta 반응형 웹표준 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- // -->

        <!-- 스타일 -->
        <style>
        </style>
        <!-- // -->

    </head>
    <!-- // -->

    <!-- body -->
    <body>
    </body>
    <!-- // -->

    <!-- 자바스크립트 -->
    <script type="text/javascript">
        
        var targetTag = document.querySelector("body");
        
        var addSpan = document.createElement("span");
        addSpan.innerHTML = "추가한 span tag";
        
        targetTag.prepend(addSpan);

        var addBr = document.createElement("br");

        targetTag.prepend(addBr);

        var addImage = document.createElement("img");
        addImage.setAttribute("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVy5CBdj9NUMIcRI7q7JafnO5zVUJl09hhrQ&usqp=CAU");
        
        targetTag.prepend(addImage);

    </script>
    <!-- // -->

</html>

'programming > javascript' 카테고리의 다른 글

자바스크립트 html 코드 작성 위치 javascript code in html (0)	2021.09.08
자바스크립트 html 속성 변경하는 방법 여러가지 (0)	2021.09.07
웹프로그래밍 자바스크립트란 기초 강좌와 튜토리얼 빠르게 보기 (0)	2021.09.05
javascript variable 자바 스크립트 변수 let 살펴보기 (0)	2021.03.23
자바스크립트 사용하여 json 데이터를 문자열 객체 변환하기 (0)	2021.03.18