Using dumb manipulation, you are able to create new elements and then add those new elements to estimate
document for doing that, we need to use some dumb methods.
All right.
Let's go to brackets at first.
I'm going to create a new element.
And for that, we need to use a method called create element.
So write variable new elements.
The mentioned method is a method of document object and therefore we need to attach it to document.
So write document thoughts, create elements.
And inside the parentheses, we need to indicate the name of art in this case, I'm going to create
Butson Element.
Therefore, we need to write it as I think the right button.
OK, let's see what we actually have done right to your castle, but look, new element.
That reload and you see that we have bottomed out, it's actually created, but it doesn't have a content
yet, so in order to create content, we need to use another method, which is called creative text.
Not so create another variable.
VAR text equals
document that creates text node.
And he said the parentheses, I'm going to right click.
Now, let's see in Castle what it looks like, right, Castle, but like text.
Reload and we have text here.
It looks like as a string value, but it's not actually a string, it's an object and an element is
an object as well.
So we have created button element and also text for that button, but they exist separately.
And we need to add this text button for that.
We need to use another method called upon child.
So we need to write new elements dot upon child.
And as a parameter, we need to insert the text note that we have just created.
So right here, text.
OK, let's see the result in cancel it first, get rid of this line and then place these cancel the
log below.
Reload and we have results that we actually wanted.
OK, the element already exists, but only in JavaScript and not in the file.
Let's go to index and choose the place where we want to add this button below.
We have a four elements and I'm going to add button inside it.
At first we need to select form elements and you see that it has an ID attribute and so let's use it,
go back to script on JS file and create a variable for.
Equals to document that got elements by ID.
And indicate the idea of the four elements, right, and and now we need to use again upon child method,
which adds the element as a last child in this case in the form element.
So right for dot upon child and inside the parenthesis.
Right.
You are not.
Then reload and here we go, our click button is added on the page, and also if we check the file,
you will find that it's added to four elements as a last child.
All right, you agree that it doesn't look good and let's use one of the methods in order to change
the style.
I'm going to use a set attribute method.
So let's write a new element that set attribute, and I'm going to set this attribute.
Right inside the parentheses, tiel.
And then right here, some CSI styles by display block.
Then right margin.
On top and bottom kind of pixels and a photo on right and left, then use padding.
Five pixels on top and bottom and top pixels also aren't going to change the background, color, right
background property and change the background color right here Carol.
And also the last one right here, color change the text color into white.
Reload and you see that it looks better.
OK, as we said up on child matter, that's the element as a lost child.
And there is another method which is called insert before.
And using this method, we are able to add the element at any specified place.
In this case, I'm going to add new element as a first child, four form element.
So right for that insert before.
This method uses two parameters.
First, one is a new element, the right new element, and as a second parameter, I want to indicate
here form dot children and then insert the square brackets, indicate index number zero.
It means that new elements will be placed before the first child element so remote and you see that
a button has changed its place and we have it above other input elements.
Again, you can go to extremophile and you will see that button is placed as a first child for the form
element.
All right.
The last thing that I'm going to show you is how to remove the elements from extremophile using JavaScript
so that we need to use remote child method.
And in order to remove the elements, first of all, you need to access on its parents.
I'm going to remove new elements that we have created.
So write new elements that parent elements.
So we have access on a form element, which is the parent of new element.
And now we can use or remove child method, right.
Dot remote child and inside the parentheses.
Right as a parameter new element.
Reload the page and you see that click button is gone.
Check again the e-mail file and you will find that it's removed from the original file as well.
It's kind of strange, but without using Perrottet element, we cannot remove the element.
All right, so in this lecture, you have learned how to create, add and remove elements using dumb.
Let's move on.