educative.io

Element.outerHTML

Courses
,
#1

What is the output in this example?

Type your question above this line.

Course: https://www.educative.io/collection/10370001/5686791109607424
Lesson: https://www.educative.io/collection/page/10370001/5686791109607424/5735735550279680

#2

Hi @masha the output will be

<h1 id="logo">Learn DOM Manipulation with Javascript</h1>
#3

Thanks/
If so,

Learn DOM Manipulation with Javascript

where is the manipulating of Element.outerHTML?
Why not just let html tag do it’s work?
Can you give an example?

#5

Hi @masha
We are using console.log("h1 element:", h1.outerHTML); which means it will show its output on console not on HTML page.

Like in this example:

Screenshot 2022-01-28 at 4.08.32 PM
Screenshot 2022-01-28 at 4.08.32 PM1959×1432 173 KB

document.querySelector('h1'); is responsible for printing Learn DOM Manipulation with Javascript while console.log("h1 element:", h1.outerHTML); is responsible for printing this on console.

h1 element:
<h1 id="logo">Learn DOM Manipulation with Javascript</h1>