JavaScript DOM Tutorial #12 - Creating Elements

Hey gang, in this JavaScript DOM tutorial we'll look at how to create elements on the fly in JavaScript and then insert them into the DOM.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

============== The Net Ninja =====================

================== Social Links ==================

[mohammadkhalaf]

I have checked all the videos on youtube explaining the DOM. This is the best one I've ever seen . Great job

[TechnGizmos]

Love this tutorial as it's a complement to the Web "Technologies" course I'm taking at college. Keep dishing out more videos ASAP. Great work mate!!

[codedynamics]

I like that little suspense twist at the end ninja .. very cool 😊

[piotrzaczek]

I've searched many tutorials throughout the web looking for good tutorials on web development and found lots of them terrible, even these with ~1milion views.

You on the contrary provide great stuff ! The only bad thing is that your videos are ending after some time :D
Keep on working and wish you very best !

[tarnadoify]

instead of creating new elements, I just used "cloneNode(true)" from your previous lessons and it works fine! Thank you for your awesome tutorials.

[saurabrakshit]

seriously bro u r excellent, you u r the 1 n nly guy who taught Javascript DOM this much easily I learnt it very nicely loved ur vedios.

[nathancornwell]

could also, create a new LI and then use li.innerHTML and use `backticks` like so:

const newLI =
const inputValue = input.value;
newLI.innerHTML = `<span
<span class="delete">delete</span>
`

UL.appendChild(newLI)

[mehdizamani]

I follow your tutorials... ❤you're the best❤... &&please create a crash course about debugging code... keep strong💪

[luizmelo]

Thanks a lot for your tutorials!! You are great!!!

[asraouismail]

another great series of videos tutorials about JS thank you a lot dude you're awaesome by the way i like how you say querySelectooor its so funny haha

[balajivenkatramans]

Awesome tutorial mate.Keep doing videos like this dude

[sxsx]

Thanks bro, I learnt more, I don't know all these before, thanks a lot

[ankitghiya]

Good Job Bro....please upload your next tutorial.

[plutopulp]

Awesome series, awesome books! Cheers pal ;)

[xoangelesxo]

You have a pretty good reading list :D

[journeytofullstack]

Great video i really found this useful.
but I have a question in my implementation I used '.innerHtml+=' and it worked out okay with lots of less lines of code is their any drawback to using this method or can I go ahead with this method.

[inclinedscorpio]

please add interview or coding problems and solving approach .

[josephniranjan]

can you say difference between using createElements vs list.innerHTML += '<li><span

[alejandrovaquera]

Is this way, better than using template strings? like: const newSpan =

[thiyagutenysen]

Why can't we just add html li block just typed, instead of using createElement