why when I create an element in the DOM I get different information in the console-CodePudding

I have this code, first I create a link, then I add it to the created p element:

let editSectionLink = document.createElement("a");
editSectionLink.setAttribute("href", "#popup-edit-section");
editSectionLink.classList.add("popup-link");
editSectionLink.innerText = "Edit";

let p = document.createElement("p");
p.style.textAlign = "right";
p.appendChild(editSectionLink);
console.log(p);

In the console I get two types of results. 1: 2: How to get the result like in the second picture because I need to get the DOM element?

CodePudding user response：

You can use console.dir():

The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.

So in your example it would be console.dir(p).