Can a paragraph be a parent-element?

Question

Should mention: I'm not the most experienced web-coder. Nevertheless: Currently dealing with some frontend stuff.

Yesterday I programmed some JavaScript and the results wasn't as I had expected.

I made this demo:

Every paragraph contains a headline and some text. The paragraphs are enclosed within a div-container.

<div class="container">
  <p class="paragraph">
    <h3 class="headline">Some headline ...</h3>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
  </p>

  <p class="paragraph">
    <h3 class="headline">Another headline ...</h3>
    <span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</span>
  </p>

  <!-- More paragraph-container ... -->
</div>

Let's say I have a reference to the first headline and would like to get the class-name of the first paragraph-tag.

I would to something like this:

// Get a reference to the first headline element.
var headline = document.getElementsByClassName('headline')[0];
// Access the parent of the headline element.
console.log(headline.parentNode.className);
// Result is: container

I expect as return 'paragraph' because the paragraph encloses the headline. Instead I get the class-name of the div.

Can anyone explain this behaviour?

You got it wrong, `parentNode` returns the first parent element. — Adam Azad, Jan 14 '16 at 07:16
Possible duplicate of http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — Arun Kumar M, Jan 14 '16 at 07:19

score 3 · Answer 1 · answered Jan 14 '16 at 07:21

3

It is not valid html to put heading elements (<h1>, <h2> etc.) inside paragraph elements.

Your browser is probably closing the paragraph element before the <h3> element, therefore the parent of <h3> becomes your container <div>,

answered Jan 14 '16 at 07:21

Ergwun

12,579
7
56
83

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

"I expect as return 'paragraph' because the paragraph encloses the headline. Instead I get the class-name of the div."

Because both <p> and <h3> are block elements. They are not placed inside each other. Just like you cannot add <div> or <p> inside <table> or <tr>.

to make <h3> inline you have to set css display: inline.

refer: Why <p> tag can't contain <div> tag inside it?

edited May 23 '17 at 10:27

Community

1
1

answered Jan 14 '16 at 07:21

Vegeta

1,319
7
17

Aren't `
` and `
` inline elements?
– choz Jan 14 '16 at 07:23
@choz Not if they aren't set by CSS – asprin Jan 14 '16 at 07:24
yes to make them inline you have to set css "display: inline" – Vegeta Jan 14 '16 at 07:25
@aspirin Just wondering if I get this methodology right. `` is an inline element, isn't it? – choz Jan 14 '16 at 07:28
@choz unless you set `display:block` on it. – Mr Lister Jan 18 '16 at 14:09

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

I believe you have invalid html. You should not put H3 inside the paragraph, but above it. Browsers will select the <div> as parent, not the <p> element

Read this article: Should a heading be inside or outside a <p>?

edited May 23 '17 at 12:15

Community

1
1

answered Jan 14 '16 at 07:25

verhie

1,298
1
7
7

score 0 · Accepted Answer · answered Jan 14 '16 at 07:27

You are getting container instead of paragraph because the web-browser is correcting your malformed html code structure:

The error is that <p> element should contain a text body and not other elements.

Changing your <p> tag to <div> makes your code work perfectly like so:

<div class="container">
  <div class="paragraph">
    <h3 class="headline">Some headline ...</h3>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
  </div>

  <div class="paragraph">
    <h3 class="headline">Another headline ...</h3>
    <span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</span>
  </div>
</div>

Can a paragraph be a parent-element?

4 Answers4

` inline elements?