.before

Question

I would like to do what this person did with replacing a removed element but I don’t understand the code. Specifically, I am asking about line 30 in the JS part. Where he uses a method called .before which I don’t know about.
Can somebody please explain what he did? Especially the .before method?
Thanks
https://sololearn.com/compiler-playground/WZW7VLbX5mVv/?ref=app

Answer 1

The code  you choose depends on your needs. If you need to make complex changes to the DOM, use the first block of code with .before. But if you just want to show or hide something, go with the second block of code.

To learn more about DOM manipulation, here's a resource: https://www.w3schools.com/js/js_htmldom.asp.

Your second simply use the CSS style properties. Here's a resource on that topic: https://www.w3schools.com/html/html_css.as

Answer 2

The before() method inserts specified content in front of the selected elements.

There is also a way to insert content after selected elements, use the after() method.

Try it.

Answer 3

The before() method inserts a html node or text before the element that it was invoked on. See the docs.

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

The HTML body in this code contains 3 elements: a h3 header, and two buttons.

removeElement.before(elementRemoved);

The remoteElement is the first button. Using the before() method, the content of "elementRemoved" is inserted in the HTML DOM just before this button. The elementRemoved contains the h3 element which had been previously deleted from the DOM.

Answer 4

Zvi Their code might be complicated because they practiced different methods they've learned. On the other hand, you just wanted to understand something you had not seen before. So your task is similar but not exactly the same.

Answer 5

Zvi Hey its awesome to hear that you've solved your issue. And you raise a good point. When working with frameworks, it's often best to avoid custom CSS or JavaScript because the framework already includes its unique styles and scripts. These elements are connected to particular classes within the framework. However,  if you want to give your web app a persoanl touch, Bootstrap offers Sass that you can tweak to customize or enhance the appearance and feel of your app.

Learn more about bootstrap Sass here. https://getbootstrap.com/docs/5.0/customize/overview/

Answer 6

Okay, I was away for a week and every time I had a chance to look at this I couldn’t figure out what is going on even with Tibor Santa’s explanation. I kept on have these “programming isn’t for me” thoughts. Today I played around with it enough and figured out what I wasn’t understanding.
the line
elementRemoved = yourElement.parentElement.removeChild(yourElement);

doesn't just remove the element it also stores it in the variable "elementRemoved" therefore it can be reinserted later on.
Thanks to everybody for their help. I can’t wait to implement this in my code now!
Edit: (Sorry, this is completely wrong, see my other comment)

Answer 7

Actually I fiddled around more with this and see that my previous post was wrong.
Now I got it right.
I don’t know why the other person had such a complex code, I did the same thing very simple here
https://sololearn.com/compiler-playground/Wsuf7MbPjLMV/?ref=app
Sorry for the aweful naming but it was just for me to see how to do this.

Answer 8

Chris coder I did it another way now, please tell me if there is a benefit one way over the other

Answer 9

In the end I used remove/.before for my web app as the display:none/inherit didn’t work how I wanted it to. It put the section I took out in the wrong place when redisplaying. I finally figured out that the problem is probably that since I was using bootstrap when I started playing around with the css things went haywire.

Answer 10

Thanks, I heard of SASS but am not quite sure about it. I am not yet ready for that, I rather deal with JS and backend (which can’t be done on Sololearn 🙁) for now. That’s why I use Bootstrap, in order not to have to think styling and still have it look decent.
Someday I hope to get around to sass but first I want to learn React this summer.