-Dynamic elements, -Data maping Dom, -Attributes

-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)

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)

                                  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);

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);

                               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'));

Another key of attribute is setting new attribute or change their value if there is such element

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

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);

Blog

-Dynamic elements, -Data maping Dom, -Attributes

Husniddin6939

Join Our Newsletter. No Spam, Only the good stuff.

Related