Kevin Powell - Community•2mo ago

js question

https://codepen.io/etrbbr/pen/LEPoMQZ Hey guys. When I add a new <li> element, an <hr> line should appear after each one. But the problem is that when I add it via JS, it works incorrectly. How it should look – in CodePen before adding new elements.

CodePen

Untitled

...

7 Replies

HelgiOP•2mo ago

And another problem: when I write a lot of text, like rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr, it doesn't wrap. But if I add even a single space, everything works fine. What's the problem?

Mannix•2mo ago

to fix the latter you can use word-break or overflow-wrap there is nothing in your js that adds the hr element

HelgiOP•2mo ago

yes i think because i didnt add hr in codepen. i was adding my hr after <li> here that was the problem but can you check codepen again, i am doing smth wrong when aiam adding hr https://codepen.io/etrbbr/pen/LEPoMQZ

CodePen

Untitled

...

Mannix•2mo ago

i would move the creation of the hr element to the updateToDoList() and use after not append

let hr = document.createElement("hr");
    hr.classList.add("line");
    todoItem.after(hr);

let hr = document.createElement("hr");
    hr.classList.add("line");
    todoItem.after(hr);

Chris Bolson•2mo ago

I don't believe that <hr> is not a valid child element of a ul. If you need lines after each "todo" item it would be simplest to add a bottom border via CSS.

Mannix•2mo ago

i didn't think of that and yeah border seems far easier way

HelgiOP•2mo ago

hell.. i didnt think about that also thanks guys 😄

Gaming

Programming

js question

Did you find this page helpful?