I'm working with JavaScript (DOM), and I can't console log my innerHTML directly in my browser's console

Question

here is my problem

what it should be

 const span = document.querySelector("span") console.log(span.parentNode); console.log(span.parentElement); console.log(span.parentNode.parentNode);

 <body> <!-- beforebegin --> <h3> <!-- afterbegin --> <span class="span">khải lê</span> <span class="span2">kai</span> <!-- beforeend --> </h3> <!-- afterend --> <script src="JS/DOM/TRAVERSING.JS"></script> </body>

Answer 1

It can be done by just logging the innerHTML property. Like:

const span = document.querySelector("span");
console.log(span.innerHTML);
console.log(span.parentElement.innerHTML);
console.log(span.parentNode.innerHTML);

Answer 2

You can:

 const span = document.querySelector("span") console.log(span.parentNode.innerHTML); console.log(span.parentElement.innerHTML); console.log(span.parentNode.parentNode.innerHTML);

 <body> <!-- beforebegin --> <h3> <!-- afterbegin --> <span class="span">khải lê</span> <span class="span2">kai</span> <!-- beforeend --> </h3> <!-- afterend --> <script src="JS/DOM/TRAVERSING.JS"></script> </body>

Answer 3

The easiest way to achieve this, is by adding an id to the element you're looking for, and then use the document selector to retrieve the element.

You can try this:

// HTML
<div id="my-div">
    <p>Hello World</p>
</div>

// Browser
const elem = document.getElementById('my-div');
console.log(elem)

I'm working with JavaScript (DOM), and I can't console log my innerHTML directly in my browser's console

Question

2 answers

solution1
1 2021-10-27 16:33:37

solution2
0 2021-10-27 16:29:57

solution3
-1 2021-10-27 16:30:58

I'm working with JavaScript (DOM), and I can't console log my innerHTML directly in my browser's console

Question

2 answers

solution1 1 2021-10-27 16:33:37

solution2 0 2021-10-27 16:29:57

solution3 -1 2021-10-27 16:30:58

solution1
1 2021-10-27 16:33:37

solution2
0 2021-10-27 16:29:57

solution3
-1 2021-10-27 16:30:58