How to display a DOM element

Question

When I use the following code in my test:

const textAreaBefore = document.querySelector('#text-area');

and I need to check this HTML element in the console with:

console.log('TAB: ', textAreaBefore);
// or console.log(document.getElementById('text-area'));

I only get the HTML Object as an output:

console.log tests/client/blog.spec.js:77
    HTMLTextAreaElement {}

How can I get it as full HTML string output like?

<textarea>.....  </textarea>

Possible duplicate of [Get selected element's outer HTML](https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) — Luca Rainone, Jan 14 '19 at 08:08

Roy Bogado · Accepted Answer · 2019-01-14T08:58:22.187

2

const textAreaBefore = document.querySelector('#text-area').innerHTML;

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

Or const textAreaBefore = document.querySelector('#text-area').outerHTML;

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

edited Jan 14 '19 at 08:58

answered Jan 14 '19 at 08:07

Roy Bogado

4,299
1
15
31

Thanks @Roy you put me on tracks ... .innerHTML and .outerHTML ( in my case ) are what I was looking for ... – Jan 14 '19 at 08:22

Victor · Answer 2 · 2019-01-14T08:25:29.590

As far as I understand your question, you only want to check the HTML for debugging purposes, right?

document.querySelector is a well tested function in browser's source code, so it cannot cause any problems at any time. So if you want to check that you're retrieving the correct element, you could simply use your browser's Developer Tools, the inspector: search for #text-area in the Inspector, select it, and then it will be available as $0 in the Console. Then you can perform checks using this variables.

EDIT Ok so I got your question wrong. I tried using document.getElementById('something') in my Chrome Developer Tools and the output is the HTML of the element. However, I suppose this behavior is not universal, so in order the ensure the HTML is written in the console, you can do:

var el = document.getElementById('text-area');
el && el.outerHTML;

Note that I am using the logical AND operator in order to make sure it is present before trying to access the outerHTML property. This is for you not to get an error.

Thanks @Victor sure I can use the Chrome browser tools ... but I wonder if there is anyway to display it in the console.log during my unit test without starting the dev server ...? — , Jan 14 '19 at 08:20

How to display a DOM element

2 Answers2