[DOM_Element] JS - outerHTML 속성 - 속성, 시작태그, 종료태그 포함한 HTML 요소 설정/반환 (= outerHTML속성 = 아웃터에이치티엠엘속성/아우러에이치티엠엘속성)

목차

1. outerHTML 예제 - 속성, 시작태그, 종료태그 포함한 HTML 요소 설정
2. outerHTML 정의
3. outerHTML 구문
4. outerHTML 예제 - 속성, 시작태그, 종료태그 포함한 HTML 요소 반환

outerHTML 예제 - 속성, 시작태그, 종료태그 포함한 HTML 요소 설정

 

<h1>홈짱닷컴</h1>

<h2>Homzzang.com</h2>

<p>홈페이지 제작관리</p>

<p>그누보드 기초강의</p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  const p0 = document.getElementsByTagName("p")[0];

  p0.outerHTML = "<h3>코딩언어 무료강의</h3>";

}

</script>

 

결과보기

outerHTML 정의

 

속성, 시작태그, 종료태그 포함한 HTML 요소 설정/반환.

 

---

 

1. cf.

innerHTML 속성 - 요소 내용 설정/반환. 

 

2.

모든 브라우저 지원.

 

3. MDN outerHTML 예제보기

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

 

outerHTML 구문

 

반환

element.outerHTML

 

설정

element.outerHTML = text

 

---

[속성값]

 

text

새로운 HTML 내용

 

---

[반환값]

 

속성, 시작태그, 종료태그 포함한 HTML 요소 설정/반환.

 

outerHTML 예제 - 속성, 시작태그, 종료태그 포함한 HTML 요소 반환

 

<h1>홈짱닷컴</h1>

<h2>Homzzang.com</h2>

<p>홈페이지 제작관리</p>

<p>그누보드 기초강의</p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  const p0 = document.getElementsByTagName("p")[0];

  alert(p0.outerHTML);

}

</script>

 

결과보기