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/

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
467	[HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기	졸리운_곰	2022.02.14	23
466	[node.js 응용] PM2 - Node.js 프로세스 관리 도구	졸리운_곰	2021.12.10	18
465	[web개발] [jQuery] Select박스 option 값 선택하기	졸리운_곰	2021.10.20	43
464	[web개발][javascript][JQuery] textarea 값 설정및 값 가져오기	졸리운_곰	2021.10.19	193
463	[web개발][javascript] javascript - 주소의 파라미터값 변수로 받기	졸리운_곰	2021.10.19	14
462	[node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기	졸리운_곰	2021.10.11	19
461	[javascript][jquery] jQuery 이벤트 중복 방지 - jQuery에서 이벤트 핸들러를 제거하는 가장 좋은 방법은 무엇입니까?	졸리운_곰	2021.09.07	15
»	[javascript] How to append HTML code to a div using JavaScript ?	졸리운_곰	2021.09.07	18
459	[javascript][jQuery] 제이쿼리(jQuery) 선택자 - #1	졸리운_곰	2021.09.07	10
458	[html] div안의 컴포넌트가 브라우저 줄이면 자동 개행되는 것 방지	졸리운_곰	2021.09.07	14
457	[HTML] HTML5 공간 분할 : 레이아웃(Layout)	졸리운_곰	2021.09.06	35
456	[HTML5] HTML 공간 분할	졸리운_곰	2021.09.06	13
455	[웹제작][웹디자인] 시각화 대시보드 를 만들기 위해 고려해야 하는 4가지	졸리운_곰	2021.09.05	138
454	[Blazor][WASM] Awesome Blazor	졸리운_곰	2021.08.15	16142
453	[Blazor][C# .net] Blazor와 C#으로 풀스택 웹 개발하기	졸리운_곰	2021.08.15	50
452	[docker] 도커 실행 중인 전체 컨테이너 중지, 일괄 삭제 (prune)	졸리운_곰	2021.08.14	124
451	[java][spring boot][swagger] Spring boot로 Swagger 적용하기	졸리운_곰	2021.07.27	13
450	[Java][Spring boot][swagger] [SpringBoot] Swagger - API Docs 자동화	졸리운_곰	2021.07.27	10
449	[WASM][web assembly] 웹 어셈블리를 보다 쉽게 웹 어플리케이션에 적용하는 방법	졸리운_곰	2021.07.19	18
448	[node.js][typescript] 5분 안에 보는 TypeScript	졸리운_곰	2021.07.03	13

첫 페이지 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