JavaScript DOM creation add delete website elements how to add www element using JavaScript
PROMOCJA WAKACJE 2024 – RABATY nawet do 66% …
Wydawnictwo Cyfrowe poswojsku.pl - cyberbezpieczeństwo, AI, RODO - ebooki:
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 1 Wprowadzenie
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 2 Cyberhigiena
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 3 Dziecko i Ty
AI w EDUKACJI Część I Praktyczny poradnik nie tylko dla nauczycieli
AI w EDUKACJI Część II Praktyczne pomysły na kreatywną naukę
JavaScript DOM creation add delete website elements how to add www element using JavaScript
JavaScript is currently the best web technology. JavaScript Allows creating attractive, professional, responsive and fast-acting websites.
And after all: JavaScript together with HTML5 and CSS3 - "rules" on the internet!
JavaScript DOM creation adding deleting web page elements
To continue learning JavaScript, create two files: index.html and main.js.
JavaScript (short for: JS) - scripting programming language. JavaScript is mainly used in Internet technologies, although there are already solutions that allow you to create applications outside the online environment. Eg Electron enables the creation of desktop applications using JavaScript. JavaScripts are most often used to provide interactivity by reacting to events, validating forms and / or building navigation elements. JavaScript scripts run by websites have limited access to the user's computer. On the server side, JavaScript can also work in the form of various frameworks and libraries (e.g. React, Angularjs, node.js, jQuery).
index.html - in this part of the JavaScript tutorial I will base on the following website code - copy the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Object Model DOM poswojsku</title>
</head>
<body>
<div id="block"></div>
<h1>Section 1</h1>
<p class="first_paragraph">This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<h1>Section 2</h1>
<p class="first_paragraph">This is first paragraph in Section 2.</p>
<p>This is second paragraph in Section 2.</p>
<p><span class="okay">Okay or not? </span>This is third paragraph in Section 2.</p>
<ul>
<Li> Item 1 poswojsku.info </ li>
<li> Item 2 poswojsku.pl </li>
<li> Item 3 poswojsku.com </li>
<Li> Item 4 poswojsku.eu </ li>
<li> Item 5 poswojsku.com.pl </li>
<Li> Item 6 poswojsku.org </ li>
</ul>
<script type="text/javascript" src="//www.poswojsku.info/main.js"></script>
</body>
</html>
The main JavaScript file is main.js - upload the following explanations to it and you will see what JavaScript has. Note: JavaScript comments are set to
// JavaScript single line comment or
/ * multiline JavaScript comment * /
In this article, all comments start with: JavaScript: :), replace them in the editor with // and you will receive a fully working js file.
Javascript: Changing CSS attributes
JavaScript: We create a variable to which we get the object
var we change = document.querySelector ('h1');
Javascript: We change the font size of the first h1
we change.style.fontSize = '52px';
we change.style.color = 'red';
we change.style.fontFamily = 'Arial';
we change.style.borderStyle = "solid";
we change.style.borderColor = 'green';
JavaScript: ADDING WEBSITE ELEMENTS
var existingElement = document.querySelector ('ul');
existingElement.innerHTML + = '<li> First new list item </li> <li> Second new list item </li>';
Javascript: I will download a list of existing element - substring (0.28) - it will download the first 28 characters
var download = existingElement.innerHTML.substring (0.28);
Javascript: I add a downloaded piece of the list to download to an existing element
existingElement.innerHTML + = downloading;
JavaScript: Creating a new element on a website
Javascript: 'element' = document.createElement ('type') - this will not add a new element to the page, just create a new element on the page and you will still need to add it
Javascript: I'm creating a new element on the page
nowyElement var = document.createElement (that);
Javascript: I create new text content assigned to a new element on the page
newElement.textContent = 'This is a new element created through document.createElement ()';
JavaScript: Now it's time to add the created element to the page using the appendChild () method
istniejacyElement.appendChild (nowyElement);
Javascript: And this again, but I will add li before existing li
wewnElement var = document.createElement (that);
wewnElement.textContent = 'This is a new point, inserted with createElement () to another point';
Javascript: insertedElement = ElementRodzic.insertBefore (newElement, givenElement)
Javascript: We're getting an array of objects - li
var existingElemnty = document.getElementsByTagName ('li');
Javascript: I specify where I want to insert a new element - I make a reference to the list item at index 5
var referencjaExistentElement = existingElement [5];
JavaScript: I add a newFromPoint element by reference
existingElement.insertBefore (internalElement, referenceExistentElement);
Javascript: Too many points created, I will remove one. We already have
JavaScript: var existingElement = document.querySelector ('ul');
Javascript: I have no reference to li
var referencjaLi = document.querySelector ('li');
Javascript: Thanks to JavaScript I will remove the first li - the first point just disappeared :)
istniejacyElement.removeChild (reference);
JavaScript: They will remove the second point
var referencjaLi = document.querySelector ('li');
istniejacyElement.removeChild (reference);
JavaScript: Let's remove the first h1 header now
var referencjaH1 = document.querySelector('h1');
referencjaH1.parentElement.removeChild(referencjaH1);
JavaScript: Maybe a deleted header will be useful? If so - you would have to add it :)
Javascript: I create a reference to pi and attach to p as a "child" header
var referdoP = document.querySelector('p');
referdoP.appendChild(referencjaH1);
JavaScript: var referdoDiv = document.querySelector('div');
JavaScript: referdoDiv.appendChild(referencjaH1);
JavaScript: Access to items - to be suspected in the JS console
var writting1 = istniejacyElement.childNodes;
console.log(writting1);
console.log (istniejacyElement.lastChild);
console.log (istniejacyElement.firstChild);
console.log (istniejacyElement.lastElementChild);
console.log (istniejacyElement.firstElementChild);
console.log (istniejacyElement.firstElementChild);
console.log (istniejacyElement.children [2]);
console.log (istniejacyElement.children [5]);
console.log (istniejacyElement.nextSibling);
console.log (istniejacyElement.previousSibling);
console.log (istniejacyElement.nextElementSibling);
console.log (istniejacyElement.previousElementSibling);
Javascript: Posted [object NodeList] or downloaded?
JavaScript: BLOCK element that changes position and color per click
next week :) to continue - you are cordially invited;)
STATIONARY TRAINING and IT CONSULTING
If you are interested
* JavaScript stationary training - I conduct both open and closed trainings and / or
* it consulting including JavaScript - I create responsive and mobile websites, I advise on necessary changes to existing websites
in the field of Creating responsive and mobile websites, including HTML5, CSS3, JavaScript, Drupal 7, JSON, jQuery, Angularjs, Backbonejs, nodejs - please contact: marketing@poswojsku.eu
More about JavaScript - see in the menu a similar article to: JavaScript DOM create add remove elements of a website