[ javascript ] 16. createElement , append, prepend , video, table

javascript+es6

[ javascript ] 16. createElement , append, prepend , video, table

변쌤(이젠강남) 2023. 10. 15. 15:31

createElement , append, prepend , video , table

1. 요소 생성 : createElement

2. appendChild

3. append , prepend

4. video

5. 테이블 추가,삭제

	설명	mdn
appendChild()	상위 노드의 하위 노드 목록 끝에 노드를 추가	바로가기
append()	상위 노드의 하위 노드 목록 끝에 노드를 추가	바로가기
prepend()	상위 노드의 하위 노드 목록 앞에 노드를 추가	바로가기
createElement ()	새로운 노드 생성	바로가기

# appendChild , createElement

createElement () : document.createElement() 새 태그를 반환

appendChild() : 지정된 상위 노드의 하위 노드 목록 끝에 노드를 추가하려면 메서드를 사용
appendChild() : 기존 하위 노드를 문서 내의 새 위치로 이동하는 데 사용

let element = document.createElement(htmlTag);

<ul id="menu">
</ul>
 
function createMenuItem(name) {
    let li = document.createElement('li');
    li.textContent = name;
    return li;
}
 
const menu = document.querySelector('#menu');
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> </title>
</head>
<body>
    let div = document.createElement('div');
    div.textContent = "연습";
    document.body.appendChild(div);
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> </title>
</head>
<body>
      let div = document.createElement('div');
      div.id = 'box';
      div.innerHTML = '<p>요소 생성예제</p>';
      document.body.appendChild(div);
</body>
</html>

li항목 생서예시

<ul id="menu">
    <li>Home</li>
</ul>

const menu = document.querySelector('#menu');
let li = document.createElement('li');
li.textContent = 'Products';
menu.appendChild(li);

li = document.createElement('li');
li.textContent = 'About Us';

menu.appendChild(li);

# 태그 이동

<ul id="first-list">
    <li>Everest</li>
    <li>Fuji</li>
    <li>Kilimanjaro</li>
</ul>

<ul id="second-list">
    <li>Karakoram Range</li>
    <li>Denali</li>
    <li>Mont Blanc</li>
</ul>

appendChild()첫 번째 목록의 첫 번째 하위 요소를 두 번째 목록으로 이동하는 데 사용

const firstList = document.querySelector('#first-list');
const everest = firstList.firstElementChild;
const secondList = document.querySelector('#second-list');

secondList.appendChild(everest)

먼저 메소드를 first-list사용하여 ID( )로 첫 번째 요소를 선택합니다 querySelector().
둘째, 첫 번째 목록에서 첫 번째 하위 요소를 선택합니다.
second-list셋째, 메서드를 사용하여 해당 ID( )로 두 번째 요소를 선택합니다 querySelector().
마지막으로 메서드를 사용하여 첫 번째 목록의 첫 번째 하위 요소를 두 번째 목록에 추가합니다 appendChild().

# append, prepend

append : 부모 노드 의 마지막 자식 뒤에 추가 또는 이동

prepend : 부모 노드의 맨 앞에 자식 뒤에 추가 또는 이동

parentNode.append(node);
parentNode.prepend(node);

append

<ul id="app">
    <li>JavaScript</li>
</ul>

let app = document.querySelector('#app');
let langs = ['TypeScript','HTML','CSS'];

langs.forEach (lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    app.append( li );
});

prepend

<ul id="app">
    <li>JavaScript</li>
</ul>

let app = document.querySelector('#app');
let langs = ['TypeScript','HTML','CSS'];

langs.forEach (lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    app.prepend( li );
});

# video

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

HTMLMediaElement: play() method - Web APIs | MDN

The HTMLMediaElement play() method attempts to begin playback of the media. It returns a Promise which is resolved when playback has been successfully started.

developer.mozilla.org

# table

1. insertRow()

insertRow() 메서드는 테이블의 특정 위치에 새로운 행(row)을 추가합니다.

문법: table.insertRow(index);
매개변수:
- index (선택사항): 새 행이 삽입될 위치를 지정하는 0 기반 인덱스입니다. 음수 값을 사용하면 해당 위치에서부터 역순으로 행을 삽입합니다. 인덱스를 생략하면 테이블의 마지막에 새 행이 추가됩니다.
반환값: 새로 추가된 행(<tr> 요소)에 대한 참조입니다.

2. insertCell()

insertCell() 메서드는 테이블 행의 특정 위치에 새로운 셀(cell)을 추가합니다.

문법: row.insertCell(index);
매개변수:
- index (선택사항): 새 셀이 삽입될 위치를 지정하는 0 기반 인덱스입니다. 인덱스를 생략하면 행의 마지막에 셀이 추가됩니다.
반환값: 새로 추가된 셀(<td> 요소)에 대한 참조입니다.

3. deleteRow()

deleteRow() 메서드는 테이블에서 특정 위치의 행(row)을 삭제합니다.

문법: table.deleteRow(index);
매개변수:
- index: 삭제할 행의 0 기반 인덱스입니다. 음수 값을 사용하면 해당 위치에서부터 역순으로 행을 삭제합니다.
반환값: 없음.

추가

<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<script>
  var table = document.getElementById("myTable");
  var row = table.insertRow(1); // 두 번째 행에 새 행을 삽입합니다.
  var cell1 = row.insertCell(0); // 첫 번째 열에 새 셀을 추가합니다.
  var cell2 = row.insertCell(1); // 두 번째 열에 새 셀을 추가합니다.
  cell1.innerHTML = "New Row, Cell 1";
  cell2.innerHTML = "New Row, Cell 2";
</script>

tr에 td 추가

<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

<script>
  var table = document.getElementById("myTable");
  var row = table.rows[0]; // 첫 번째 행을 가져옵니다.
  var cell = row.insertCell(1); // 두 번째 위치에 새 셀을 삽입합니다.
  cell.innerHTML = "New Cell";
</script>

삭제

<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<script>
  var table = document.getElementById("myTable");
  table.deleteRow(0); // 첫 번째 행을 삭제합니다.
</script>

'javascript+es6' 카테고리의 다른 글

[ javascript ] 18 . 함수 II (0)	2023.11.06
[ javascript ] 17. window,스크롤, 마우스 좌표, getBoundingClientRect, document (0)	2023.10.16
[ javascript ] 15. className , classList, getComputedStyle (0)	2023.09.27
[ javascript ] 14. this, target과 currentTarget, dataset, animate (0)	2023.09.27
[ javascript ] 13. 이벤트 흐름(버블링과 캡처링) , preventDefault (0)	2023.09.27

현재글[ javascript ] 16. createElement , append, prepend , video, table

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

fullstack-study