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/

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
»	[javascript] How to append HTML code to a div using JavaScript ?	졸리운_곰	2021.09.07	121
459	[javascript][jQuery] 제이쿼리(jQuery) 선택자 - #1	졸리운_곰	2021.09.07	234
458	[html] div안의 컴포넌트가 브라우저 줄이면 자동 개행되는 것 방지	졸리운_곰	2021.09.07	172
457	[HTML] HTML5 공간 분할 : 레이아웃(Layout)	졸리운_곰	2021.09.06	201
456	[HTML5] HTML 공간 분할	졸리운_곰	2021.09.06	121
455	[웹제작][웹디자인] 시각화 대시보드 를 만들기 위해 고려해야 하는 4가지	졸리운_곰	2021.09.05	325
454	[Blazor][WASM] Awesome Blazor	졸리운_곰	2021.08.15	19213
453	[Blazor][C# .net] Blazor와 C#으로 풀스택 웹 개발하기	졸리운_곰	2021.08.15	249
452	[docker] 도커 실행 중인 전체 컨테이너 중지, 일괄 삭제 (prune)	졸리운_곰	2021.08.14	268
451	[java][spring boot][swagger] Spring boot로 Swagger 적용하기	졸리운_곰	2021.07.27	151
450	[Java][Spring boot][swagger] [SpringBoot] Swagger - API Docs 자동화	졸리운_곰	2021.07.27	119
449	[WASM][web assembly] 웹 어셈블리를 보다 쉽게 웹 어플리케이션에 적용하는 방법	졸리운_곰	2021.07.19	187
448	[node.js][typescript] 5분 안에 보는 TypeScript	졸리운_곰	2021.07.03	198
447	Using Blazor, Tensorflow and ML.NET to Identify Images	졸리운_곰	2021.07.03	319
446	Chrome으로 디버깅하기	졸리운_곰	2021.06.11	175
445	[HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery	졸리운_곰	2021.06.01	495
444	[Javascript, ajax] <jQuery>Ajax, json(제이손) 파싱해서 가져오기	졸리운_곰	2021.05.17	220
443	[Javascript, ajax] XMLHttpRequest, jQuery Ajax 예제	졸리운_곰	2021.05.17	189
442	[javascript] Javascript JSON.parse(), JSON.stringify() 사용하는법	졸리운_곰	2021.05.17	136
441	[JAVASCRIPT에서 session 값 가져다 쓰는 법] 가져오는 법, string data type과 비교하는 법	졸리운_곰	2021.05.14	2288

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