Creating and controlling html elements in javascript - ProgrammerTech
Language:

Search

Creating and controlling html elements in javascript

  • Share this:
Creating and controlling html elements in javascript

Control the features of html elements via javascript

Creating and controlling html elements, today we will explain how to control the features of html elements through JavaScript, and we will also explain how to define elements through the class.

We create an img element in the html file and give it id and class.

<img src="" id="logo" class="classLogo" />

It is in the javascript file.

var classLogo = document.getElementsByClassName("classLogo");
classLogo.

And when we write classLogo in the new line, we will notice that we have access to the permissions to use the class by showing some properties.

1-44.webp

 

via id.

var idLogo = document.getElementById("logo");
idLogo.

When clicking on the point, we will notice that some properties of the permissions that we can use will appear.

2-40.webp

 

Element hasAtterbute

<img src="" id="logo" class="classLogo" />

We will use javascript to detect a feature via hasAttribute and see if the img element has src or not.

var idLogo =  document.getElementById("logo");
if(idLogo.hasAttribute("src")){
	alert("yes")
}

The condition will be satisfied because the img element has an Atterbute of type src, it prints yes. And if the element we selected does not have src, then the condition will not be met and therefore commands inside the curly braces in alert will not be executed.

 

Element getAtterbute

We want to return the id via the getAtterbute property in the console.

var idLogo =  document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));

As we noticed, it brought us the id content which is the logo and if we change the value for class it will show us the classLogo.

 

The setAtterbute element to add new values

The setAtterbute element is to add a new value to any html element or modify the previous value.

var idLogo =  document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));
idLogo.setAtterbute("src","tr.jpg");

We have created a variable which is idLogo and assigned to it the display value of the id data contained in the html. We display the data via the console, which is to fetch an image associated with the id. And we specified the path of the image and its name, and the name of the image is tr.jpg. And when we open the html file in the browser, the result is.

3-36.webp

 

We also note that he replaced the old src value with a new value, which is an image that you put in the current working folder. We can also control the width and height of the image using JavaScript.

<img src="" id="logo" class="classLogo" width="" height=""/>

We set the values ​​via javascript as follows:

var idLogo =  document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));
idLogo.setAtterbute("src","tr.jpg"); 
idLogo.setAtterbute("width","40%");
idLogo.setAtterbute("height","300px");

We set the width and height values ​​for the image via the javascript file with setAtterbute. and browser result.

4-34.webp

 

We also note that the image has been resized easily via JavaScript

 

The removeAtterbute element to delete tags

We can remove any feature from html by removeAtterbute.

var idLogo =  document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));
idLogo.setAtterbute("src","tr.jpg"); 
idLogo.setAtterbute("width","40%");
idLogo.setAtterbute("height","300px");
idLogo.removeAtterbute("class");
idLogo.removeAtterbute("width");

In the previous codes, we removed the class and width from the code with the removeAtterbute element to delete the properties.

 

appendChild element

The appendChild element with which we can add html elements via javascript. For example, we want the user to add required data to the list. We put the input field and the submit button. When the user writes anything in the field and presses the submit button, what he wrote is added to the list.

be in html file.

<input type="text" id="input">
<button onclick="add()">ADD</button>
<ul id="myList">
</ul>

in the javascript file

function add(){
var li = document.createElement("LI");
var input = document.getElementById("input").value;
var text = document.createTextNode(input);
li.appendChild(text);
document.getElementById("myList").appendChild(li);
}

At first we created a function and associated it with add() with the onclick button so that when it is pressed, the function works. And we created the li variable and we chose createElement for it, that is, create an element, and within the parentheses, we specified the LI element, so we created the LI element. Then we determined what to add to this element and created an input variable. We told him that we will take the values ​​from the input element and associate them with the id of the input element. And then we created another variable named text and gave it the property createTextNode ie create text and value that takes the value when added. And then we added the text by selecting the li element via li.appendChild and putting text in parentheses, meaning we want to take the values ​​from the text variable. And we want to add a LI to the ul element in the html file that we specify via id and specify the hands myList. And then we put the appendChild, which we want, whenever we press add, it adds to what we wrote and we set the LI to be added.

5-22.webp

 

We wrote these names in sequence. Whenever we write a name, we press add and add it to us, and thus the button works successfully. Let's put a special color for it and a background for it.

function add(){
var li = document.createElement("LI");
li.style.background = "aqua";
li.style.color = "green";
li.id = "li";
var input = document.getElementById("input").value;
var text = document.createTextNode(input);
li.appendChild(text);
document.getElementById("myList").appendChild(li);
}

And we will get the result.

6-18.webp

 

We can see from the above that we have set a background for the six aqua color and green font color through javascript and this command succeeded.

 

Retrieve images via javascript

<div id = "myDIVE"></div>

And in the javascript file

var myIMG = document.createElement("img");
myIMG.src = "tr.jpg";
myIMG.id = "img";
myIMG.style.width = "50%";
document.getElementById("myDIVE").appendChild(myIMG);

We selected the tr image we have in the main working file and fetched it via javascript without any complications or problems.

 

Retrieve audio files with javascript

<div id = "myAudio"></div>

in the javascript file

var myAudio = document.createElement("audio"); 
myAudio.src = "hazt.mp3";
myAudio.controls = "controls";
document.getElementById("myAudio").appendChild(myAudio);

The audio file named hazt.mp3 is included in the current working file. When you open it in the browser, it will appear as.

7-9.webp

 

We also noticed that the audio file was successfully retrieved as if we had summoned it via html, and also the video files are retrieved in the same way.


Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com