-Dynamic elements, -Data maping Dom, -Attributes
Tags: javascript
Published: 2024-06-28 09:43:31

-Dynamic elements - throught this way, we can create elements and move in js like this
1.First of all, we create html tag in js
```
const div=document.createElement('div')
```
2.Secondly, we add classList
```
div.classList.add('p-5','bg-info','m-5')
```
3.Thirdly, we add new tag in div which we create in js 
```
div.innerHTML='<p>JavaScript</p>'
```
4.Vital code for access to show in browser, we open new container in html , after that we push our dynamic element in it  
```
container.apend(div)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2twzbymqaczkoqzwvktb.png)

5.If we wanna create more cards like so, we should create a new function and also should add loops for controlling its length

```
function createElement(limit){
    for(let i=0; i<limit; i++){
        const div=document.createElement('div');
        div.classList.add('p-5', 'bg-info','m-5');
        div.innerHTML='<p>JavaScript</p>';
        container.prepend(div)
    }

}

createElement(3)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b7k3xxaoska0m67x545.png)

                                      After  Before

This keys put our dynamic elements right places with html tags.
For instace we have once html tag and anotherone is dynamic element we create, now let's contain our cards right places with after,before kays
```
"use-strict";
const button=$('.btn-danger')

const btnjs=document.createElement('button');
      btnjs.classList.add('btn-success','btn','m-5');
      btnjs.textContent='Js button';


      button.after(btnjs);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sofw9rh3n706trtttkt.png)

in this case, we put js dynamic button next of html buuton throught After js key.

                                      Before

```
"use-strict";
const button=$('.btn-danger')

const btnjs=document.createElement('button');
      btnjs.classList.add('btn-success','btn','m-3');
      btnjs.textContent='Js button';


      button.before(btnjs);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6livpc8mbgzd4poszy9o.png)


                                   Attributes

Attribute - Example for attribute, in this code we have seen such kind of attributes like id,type,class..etc
```
<button id="btn-danger" type="button" class="btn-danger btn m-3">html button</button>
```
How to get attribute in js ?  Simple !!!! Like this

```
console.log(button.getAttribute('id'));
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgyivxmu4s74aqgqxsmz.png)

Another key of attribute is setting new attribute or change their value if there is such element
```
button.setAttribute('title','button')
console.log(button);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4ucu3x17nuvsl596is6.png)

If we try to set again this exsist Attribute in it , it will change its value 
```
button.setAttribute('title','button')
console.log(button);

button.setAttribute('title','form')
console.log(button);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82blvel9jh335dkmkltc.png)