gwooden_코린이

자바스크립js 요소(태그)들 추가 / 삭제 본문

프론트엔드/자바스크립트

자바스크립js 요소(태그)들 추가 / 삭제

gwooden22 2022. 12. 26. 10:15
728x90

1. 자바스크립 요소(태그)들 추가 / 삭제

//태그를 생성
let div = document.createElement('div');

//태그 클래스명 지정
div.className = 'alert';

//태그안에 innerHTML을 이용해 넣어줄 내용 적어주기
div.innerHTML = '<b>hi</b>';

//html 문서에 body 태그에다가 태그를 추가
document.body.append(div);
  • 태그.append : 해당 태그 끝에 추가
  • 태그.prepend : 맨 앞에 추가
  • 태그.before : 태그 이전에 삽입
  • 태그.after : 태그 이후에 삽입
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="1.css">
</head>
<body>

  <div id="div">
    
  </div>
  
  <ol id="ol">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>

  <script src="1.js"></script>
</body>
</html>
ol.before('이전');
ol.after('이후');

let a = document.createElement('li');
a.innerHTML='앞에';
ol.prepend(a);

let b = document.createElement('li');
b.innerHTML='뒤에';
ol.append(b, 'hi'); //innertHTML이 아니면 태그를 넣어도 단순 문자로 인식된다.
div.insertAdjacentHTML('beforebegin', '<b>hello</b>') //태그를 넣으면 태그로 인식해줌

.insertAdjacentHTML(위치, 내용)

- 위치 -

  • beforebegin : 앞에 추가 ( = before)
  • afterend : 뒤에 추가 ( = after)
  • afterbegin : 안쪽 앞에 추가 ( = prepend)
  • beforeend : 안쪽 뒤에 추가 ( = append)

ol.insertAdjacentHTML('afterbegin', `<li class='a'>앞에추가함</li>`);

tip : 빽틱 (``)을 이용하면 자동으로 띄어쓰기를 인식해준다.

 

주의 : `<li class='a'>앞에추가함</li>` ---> 첫 시작 부분과 클래스명을 넣을때 다르게 사용해야 끝나는 부분을 제대로 인식

ex)  "<li class="a">앞에추가함</li>"  ---> X

ex)  "<li class='a'>앞에추가함</li>" ----> O

 

let a = document.createElement('li');
a.innerHTML='앞에';
ol.prepend(a);

위 2가지 코드는 같은 기능을 한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="1.css">
</head>
<body>

  <div id="div">

  </div>
  <script src="1.js"></script>
</body>
</html>
.alert {
  padding: 5px;
  background: skyblue;
}
let div = document.createElement('div');
div.className = 'alert';
div.innerHTML = '<b>hi</b>';
document.body.append(div);

setTimeout(() => div.remove(), 3000);
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="1.css">
</head>
<body>

  <div id="first">첫 번쨰</div>
  <div id="second">두 번째</div>

  
  <script src="1.js"></script>
</body>
</html>
second.after(first);

id 명 seconde 뒤에 first가 오게 하는 기능

728x90
저작자표시 비영리 변경금지 (새창열림)

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

자바스크립트 + 제이쿼리 이벤트  (0) 2022.12.26
자바스크립트 + 제이쿼리 장바구니 카드 만들기  (0) 2022.12.26
제이쿼리 기능 사용해보기  (0) 2022.12.23
제이쿼리 기능 적용 및 nodejs 적용하기  (0) 2022.12.23
자바스크립트js DOM  (0) 2022.12.23
'프론트엔드/자바스크립트' Related Articles more
Comments