How do I check if an element is a flow element in JavaScript

Question

When I insert a div into a p element, the DOM will correct that to

<p></p>
<div></div>

Same for a figure element. It can't be a child of p. So called flow elements are only allowed into parents that allow flow elements.

How do I check with JavaScript if a node is a flow element, or an element that allows flow elements as children?

Update This has nothing to do with CSS. This is not about style, it's about the DOM. A div can have a div as a child, but a p cannot have a p as a child.

Possible duplicate of [Detect inline/block type of a DOM element](https://stackoverflow.com/questions/2880957/detect-inline-block-type-of-a-dom-element) — Get Off My Lawn, Apr 02 '18 at 14:18
@GetOffMyLawn `div` and `span` are both flow elements https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Main_content_categories — gurvinder372, Apr 02 '18 at 14:21
I don't think there is a build in way to do this but I could be wrong. — Huangism, Apr 02 '18 at 15:54

score 0 · Answer 1 · answered Apr 02 '18 at 15:57

I think there's not something like that but what you can do is implement your method

for example that's is snapshot from p element

p
 tagName: "P"
 nodeName: "P"

You will find those attr if you console.log(p) which is the element , so you can implement a method that go through the document and check the element or for parts you needs

With specified array to decide if it's flow or not for example [p, figure, ...] and check if in the array then return that is flow

score 0 · Answer 2 · answered Aug 17 '22 at 10:27

0

You probably can get the display style of an element to detect if the element is flow or phrasing.

window.getComputedStyle(element).display === 'block'

answered Aug 17 '22 at 10:27

shtse8

1,092
12
20

How do I check if an element is a flow element in JavaScript

2 Answers2