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().

 

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>

 

 

 

# 요소의 너비,높이

속성 의미(width/hegiht)  포함범위 설명
scrollWidth / scrollHeight 전체 콘텐츠 크기 (스크롤 포함) 콘텐츠 크기 + padding 스크롤이 생길 경우까지 포함된 전체 크기
clientWidth / clientHeight 보이는 영역 크기 (스크롤바 제외) 콘텐츠 + padding 실제로 콘텐츠를 표시하는 내부 크기
offsetWidth / offsetHeight 전체 요소 크기 (스크롤 제외) 콘텐츠 + padding + border 요소가 실제 차지하는 공간 크기
style.width / style.height 인라인 스타일로 설정한 크기 (예: "100px") 명시적으로 지정한 값만 있음 직접 스타일로 설정한 값 (없으면 빈 문자열)
getComputedStyle(elem).width 최종 계산된 너비 문자열 (예: "120px") border 제외한 렌더링된 너비 정확한 최종 계산값 확인용

 

const box = document.getElementById('box');
console.log('scrollHeight:', box.scrollHeight);   // 콘텐츠 전체 높이 (스크롤 포함)
console.log('clientHeight:', box.clientHeight);   // padding까지 포함한 높이 (보이는 영역)
console.log('offsetHeight:', box.offsetHeight);   // padding + border 포함한 높이
console.log('style.height:', box.style.height);   // 스타일로 지정한 높이 (없으면 빈 문자열)

 

 

속성(= width ) 설명 포함요소 transition 사용여부
scrollHeight 콘텐츠 전체 높이 (스크롤 포함) padding 포함, border 제외 X
clientHeight 보이는 영역의 높이 padding 포함, border 제외 X
offsetHeight 요소의 실제 화면 상 높이 padding + border 포함 X
style.height 스타일에서 명시적으로 지정된 높이 (예: "100px") 직접 지정한 값만 O

 

반응형

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

[ javascript ] 21. 비구조화 할당 (구조분해) 문법  (0) 2023.11.09
[ 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, transitionend  (0) 2023.09.27
[ javascript ] 13. 이벤트 흐름(버블링과 캡처링) , preventDefault  (0) 2023.09.27

'javascript+es6'의 다른글

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

관련글

티스토리툴바