HTML [javascript] How to append HTML code to a div using JavaScript ?

2021.09.07 16:24

[javascript] How to append HTML code to a div using JavaScript ?

here are two ways to append HTML code to a div through JavaScript

Using the innerHTML attribute
Using the insertAdjacentHTML() method

Using the innerHTML attribute:
To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

Syntax:

element.innerHTML += "additional HTML code"

element.innerHTML = element.innerHTML + "additional HTML code"

Example:

	
			<!DOCTYPE html>
<html>
  
<head>
    <title>How to Append HTML Code to a Div using Javascript</title>
    <style>
        body {
            text-align: center;
              
            padding: 5%;
        }
        h1{
            color:green;
        }
    </style>
</head>
  
<body>
    <div id="add_to_me">
        <h1>GeeksforGeeks</h1>
        <p>This is the text which has already been typed into the div</p>
    </div>
  
    <button onclick="addCode()">Add Stuff</button>
    <script>
        function addCode() {
            document.getElementById("add_to_me").innerHTML += 
              "<h3>This is the text which has been inserted by JS</h3>";
        }
    </script>
</body>
  
</html>

		

Output:
Before Clicking the Button:

After Clicking the Button:

Note: This method basically destroys all the content of the div and recreates it. So, if you have any listeners attached to the child nodes of that div, they will be lost.

Using the insertAdjacentHTML() method

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code. This method takes two parameters:

Syntax:

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

Example:

	
		
				<!DOCTYPE html>
<html>
  
<head>
    <title>How to Append HTML Code to a Div using Javascript</title>
    <style>
        body {
            text-align: center;
            padding: 5%;
        }
      h1{
        color: green
          }
    </style>
</head>
  
<body>
    <div id="add_to_me">
        <h1>GeeksforGeeks</h1>
        <p id="add_after_me">
          This is the text which has already been typed into the div</p>
    </div>
  
    <button onclick="addCode()">Add Stuff</button>
    <script>
        function addCode() {
            document.getElementById("add_after_me").insertAdjacentHTML("afterend",
                "<h3>This is the text which has been inserted by JS</h3>");
        }
    </script>
</body>
  
</html>

			

	
	

1. The position (in the document) where you want to insert the code (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’)
2. The HTML code you want to insert enclosed in quotes
- Output:
- Before Clicking the Button:
- After Clicking the Button:
  
  [출처] https://www.geeksforgeeks.org/how-to-append-html-code-to-a-div-using-javascript/

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
479	[HTML/Javascript] 웹소켓 튜터리얼	졸리운_곰	2022.11.15	190
478	[HTML, Javascript] JavaScript에 변수가 있는지 확인	졸리운_곰	2022.11.15	193
477	[html, javascript] JavaScript에서 함수가 완료 될 때까지 기다립니다	졸리운_곰	2022.11.15	190
476	[IE javascript to Chrome] A universal createPopup() replacement	졸리운_곰	2022.11.14	127
475	[web개발][javascript] TypeScript 기본 문법 정리	졸리운_곰	2022.11.05	122
474	[HTML/Javascript] indexedDB에 대해 알아보자!	졸리운_곰	2022.09.15	202
473	[HTML][Javascript] JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용	졸리운_곰	2022.09.09	144
472	[HTML] Div 를 새창 팝업으로 띄우기	졸리운_곰	2022.09.09	163
471	[Web Design][웹 디자인] Sass(SCSS) 완전 정복!	졸리운_곰	2022.07.31	279
470	[Apache 운영] 404 에러페이지 전환 How to Redirect 404 to Homepage using .htaccess	졸리운_곰	2022.07.28	229
469	[JWT} [WEB] JWT(Json Web Token)란? 개념 정리 및 예제	졸리운_곰	2022.07.15	199
468	[php worldpress] [위 에]wordpress 사용자 암호 화 원리 및 알고리즘 분석	졸리운_곰	2022.04.11	203
467	[HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기	졸리운_곰	2022.02.14	149
466	[node.js 응용] PM2 - Node.js 프로세스 관리 도구	졸리운_곰	2021.12.10	229
465	[web개발] [jQuery] Select박스 option 값 선택하기	졸리운_곰	2021.10.20	285
464	[web개발][javascript][JQuery] textarea 값 설정및 값 가져오기	졸리운_곰	2021.10.19	313
463	[web개발][javascript] javascript - 주소의 파라미터값 변수로 받기	졸리운_곰	2021.10.19	147
462	[node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기	졸리운_곰	2021.10.11	208
461	[javascript][jquery] jQuery 이벤트 중복 방지 - jQuery에서 이벤트 핸들러를 제거하는 가장 좋은 방법은 무엇입니까?	졸리운_곰	2021.09.07	117
»	[javascript] How to append HTML code to a div using JavaScript ?	졸리운_곰	2021.09.07	119

첫 페이지 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 끝 페이지

쓰기

태그

HTML [javascript] How to append HTML code to a div using JavaScript ?

[javascript] How to append HTML code to a div using JavaScript ?

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com