Add DOM Elements - JavaScript Video Tutorial - LinkedIn

Skip to main content

Solutions for:

Business Higher Education Government Buy for my team

From the course: JavaScript Essential Training

Unlock the full course today

Join today to access over 25,200 courses taught by industry experts.

Add DOM elements - JavaScript Tutorial

From the course: JavaScript Essential Training

Start my 1-month free trial Buy for my team

• Transcripts
• Exercise Files
• View Offline

Add DOM elements

“

- [Instructor] In the example project, I used this template literal to create HTML and then added that HTML to the existing document by targeting an existing element and replacing its internal HTML using the inner HTML property. All that functionality is down here, and we've now covered all the features that make this possible. This is an effective way of injecting new HTML into a document, but it's also rather crude and destructive. It requires an existing element to be in the HTML documents, and it wipes up whatever code was contained inside that element. And that can be a problem. Let me show you what I mean. In the exercise files for this movie, I've added a short intro text to the main section of the document. This new text sits inside the main element. And the problem is when we inject the backpack content using JavaScript, we're replacing all the content inside the main element, so this new text disappears.…

Practice while you learn with exercise files

Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.

• Exercise File: Subscribe to access. Ex_Files_JavaScript_EssT.zip

Download the exercise files for this course. Get started with a free trial today.

Download courses and learn on the go

Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.

Watch this course anytime, anywhere. Get started with a free trial today.

Contents

• Introduction Introduction
  • JavaScript: The soil from which the modern web grows 1m 31s
  • How to use the exercise files 2m 1s
  • Exploring the lab environment 2m 23s
• 1. JavaScript: A Brief Introduction 1. JavaScript: A Brief Introduction
  • JavaScript: First contact 2m 46s
  • (Locked) Navigating the JS landscape 4m 29s
  • (Locked) Tools for working with JavaScript 3m 24s
  • (Locked) Linting and formatting 6m 27s
  • (Locked) Get to know the browser console 6m 24s
  • (Locked) JavaScript language basics 5m 37s
  • (Locked) Learning JavaScript backward 3m
• 2. Get Up and Running with JS 2. Get Up and Running with JS
  • JavaScript in an HTML document 3m
  • (Locked) JavaScript as an external file 2m 59s
  • (Locked) Modern JavaScript loading 4m 14s
  • (Locked) JavaScript modules 4m 18s
• 3. Objects 3. Objects
  • Objects: A practical introduction 4m 53s
  • (Locked) JavaScript objects: The code version 2m 57s
  • (Locked) Object containers 2m 22s
  • (Locked) Object properties 55s
  • (Locked) Accessing objects 2m 32s
  • (Locked) Accessing object properties 5m 35s
  • (Locked) Practice: Build a new object 1m 18s
  • (Locked) Object methods 6m 29s
  • (Locked) Practice: Build a new method 56s
  • (Locked) Classes: Object blueprints 6m 35s
  • (Locked) Object constructors 2m 21s
  • (Locked) Practice: Build a new object with a constructor 1m 13s
  • (Locked) Global objects 7m 47s
  • (Locked) Challenge intro: Create a new object type 2m 5s
  • (Locked) Solution: Create a new object type 3m 16s
• 4. Sidebar: String Output 4. Sidebar: String Output
  • Mix text and variables with template literals 7m 21s
  • (Locked) Traditional string output 3m 18s
  • (Locked) Challenge intro: Create a template literal 1m 43s
  • (Locked) Solution: Create a template literal 3m 57s
• 5. DOM 5. DOM
  • DOM: The Document Object Model 4m 7s
  • (Locked) Access elements with querySelector methods 6m 6s
  • (Locked) Access elements using older methods 3m 45s
  • (Locked) Practice: Find an element 1m 29s
  • (Locked) Modifying element classes 4m 53s
  • (Locked) Attributes 4m 13s
  • (Locked) Inline style 3m 52s
  • (Locked) Practice: Modify classes and attributes, and styles 1m 36s
  • (Locked) Add DOM elements 5m 25s
  • (Locked) Challenge intro: Create elements 1m 17s
  • (Locked) Solution: Create elements 3m 35s
• 6. Sidebar: Variables and Data Types 6. Sidebar: Variables and Data Types
  • Variables: Containers for everything 2m 31s
  • (Locked) Var 3m 15s
  • (Locked) Scope 3m 37s
  • (Locked) Let 4m 34s
  • (Locked) Const 2m 58s
  • (Locked) Data types 3m 7s
  • (Locked) Assignment vs. comparison 4m 35s
  • (Locked) Math operators 6m 13s
  • (Locked) Challenge intro: Calculate sales tax 1m 35s
  • (Locked) Solution: Calculate sales tax 3m 30s
• 7. Arrays 7. Arrays
  • Arrays explained 2m 50s
  • (Locked) Arrays in code 4m 36s
  • (Locked) Array methods 5m 53s
  • (Locked) Challenge intro: Array manipulation 1m 45s
  • (Locked) Solution: Array manipulation 4m 13s
• 8. Functions and Methods 8. Functions and Methods
  • The real-world function 2m 49s
  • (Locked) Functions and methods 6m 23s
  • (Locked) A standard function 3m 53s
  • (Locked) The arrow function 4m 49s
  • (Locked) Arrow functions and "this" 4m 20s
  • (Locked) Practice: Build a function 1m 31s
  • (Locked) Pass data to a function with parameters 4m 56s
  • (Locked) Return values from a function 7m 1s
  • (Locked) Practice: Pass values between functions 2m 33s
  • (Locked) Callbacks 5m 29s
  • (Locked) Conditional if...else statement 5m 52s
  • (Locked) Logical operators 3m 31s
  • (Locked) Conditional switch statement 5m 55s
  • (Locked) Looping through content 5m 19s
  • (Locked) Using the map() array method 4m 52s
  • (Locked) Challenge intro: Create a content factory 2m 36s
  • (Locked) Solution: Create a content factory 5m 21s
• 9. Events 9. Events
  • (Locked) DOM events explained 1m 41s
  • (Locked) Typical DOM events 5m 35s
  • (Locked) Event listeners 5m 45s
  • (Locked) Practice: Experiment with event listeners 1m 32s
  • (Locked) Advanced event listeners and "this" 6m 12s
  • (Locked) Pass arguments through event listeners 4m 53s
  • (Locked) Challenge intro: Create an event listener 2m 15s
  • (Locked) Solution: Create an event listener 6m 16s
• 10. Troubleshooting and Validating JS 10. Troubleshooting and Validating JS
  • (Locked) Troubleshooting JavaScript in the browser 4m 57s
  • (Locked) Making sense of a React component 5m 11s
• Conclusion Conclusion
  • (Locked) Next steps on your learning journey 3m 39s

*Price may change based on profile and billing country information entered during Sign In or Registration

Explore Business Topics

• Artificial Intelligence for Business
• Business Analysis and Strategy
• Business Software and Tools
• Career Development
• Customer Service
• Diversity, Equity, and Inclusion (DEI)
• Finance and Accounting
• Human Resources
• Leadership and Management
• Marketing
• Professional Development
• Project Management
• Sales
• Small Business and Entrepreneurship
• Training and Education

See all

Explore Creative Topics

• AEC
• Animation and Illustration
• Audio and Music
• Graphic Design
• Motion Graphics and VFX
• Photography
• Product and Manufacturing
• User Experience
• Video
• Visualization and Real-Time
• Web Design

See all

Explore Technology Topics

• Artificial Intelligence (AI)
• Cloud Computing
• Cybersecurity
• Data Science
• Database Management
• DevOps
• Hardware
• IT Help Desk
• Mobile Development
• Network and System Administration
• Software Development
• Web Development

See all