2021-06-15 03:34:20 +09:00
---
id: bad87fee1348bd9aede08835
title: Inserir diversos elementos em um único elemento div
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
forumTopicId: 18246
dashedName: nest-many-elements-within-a-single-div-element
---
# --description--
O elemento `div` , também conhecido como elemento de divisão, é um container para outros elementos.
O elemento `div` é, provavelmente, o elemento de HTML mais utilizado de todos.
Assim como os outros elementos que precisam de fechamento, você pode abrir um elemento `div` com `<div>` e fechá-lo em outra linha com `</div>` .
# --instructions--
Insira suas listas que dizem "Things cats love" e "Top 3 things cats hate" dentro de um único elemento `div` .
Dica: experimente colocar a tag de abertura da `div` acima do elemento `p` que diz "Things cats love" e a tag de fechamento da `div` após a tag de fechamento do elemento `ol` para que as duas listas estejam dentro do elemento `div` .
# --hints--
Os elementos `p` deve estar dentro do elemento `div` .
```js
assert($('div').children('p').length > 1);
```
O elemento `ul` deve estar dentro do elemento `div` .
```js
assert($('div').children('ul').length > 0);
```
O elemento `ol` deve estar dentro do elemento `div` .
```js
assert($('div').children('ol').length > 0);
```
O elemento `div` deve ter uma tag de fechamento.
```js
assert(
code.match(/< \/div > /g) &&
code.match(/< \/div > /g).length === code.match(/< div > /g).length
);
```
# --seed--
## --seed-contents--
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2021-09-22 08:34:59 -07:00
< a href = "#" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2021-06-15 03:34:20 +09:00
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< form action = "https://www.freecatphotoapp.com/submit-cat-photo" >
< label for = "indoor" > < input id = "indoor" type = "radio" name = "indoor-outdoor" value = "indoor" checked > Indoor< / label >
< label for = "outdoor" > < input id = "outdoor" type = "radio" name = "indoor-outdoor" value = "outdoor" > Outdoor< / label > < br >
< label for = "loving" > < input id = "loving" type = "checkbox" name = "personality" value = "loving" checked > Loving< / label >
< label for = "lazy" > < input id = "lazy" type = "checkbox" name = "personality" value = "lazy" > Lazy< / label >
< label for = "energetic" > < input id = "energetic" type = "checkbox" name = "personality" value = "energetic" > Energetic< / label > < br >
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
```
# --solutions--
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2021-09-22 08:34:59 -07:00
< a href = "#" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2021-06-15 03:34:20 +09:00
< div >
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< / div >
< form action = "https://www.freecatphotoapp.com/submit-cat-photo" >
< label for = "indoor" > < input id = "indoor" type = "radio" name = "indoor-outdoor" value = "indoor" checked > Indoor< / label >
< label for = "outdoor" > < input id = "outdoor" type = "radio" name = "indoor-outdoor" value = "outdoor" > Outdoor< / label > < br >
< label for = "loving" > < input id = "loving" type = "checkbox" name = "personality" value = "loving" checked > Loving< / label >
< label for = "lazy" > < input id = "lazy" type = "checkbox" name = "personality" value = "lazy" > Lazy< / label >
< label for = "energetic" > < input id = "energetic" type = "checkbox" name = "personality" value = "energetic" > Energetic< / label > < br >
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
```