3 EASY Ways To Generate HTML with JavaScript for Beginners

Подписаться 132 тыс.

Просмотров 31 тыс.

50% 1

In today's video I'll be showing you 3 popular techniques for generating HTML with your JavaScript code. This is very easy to do and is perfect for dynamically building your HTML code or user interface.
Chapters:
0:00 Intro
2:37 Creating HTML Element Objects
6:16 Using innerHTML
12:53 Using insertAdjacentHTML
17:03 Outro
For your reference, check this out:
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 36

@rishiktiwari 2 года назад

It feels so good to see a RU-vidr not using shit load of JS frameworks/library to get the simplest task done. Thank you for keeping it simple and concise 🙏🏻.

@Tazzquilizer 8 месяцев назад

Totally agree. it's crazy how many people are loading 150kb of react, just to do the same that template literals can do.

@rishiktiwari 8 месяцев назад

@@Tazzquilizer Exactly, I built enterprise grade realtime app with nothing but vanilla js! Few things take longer but the performance gains and peace of mind is unmatched!

@Syffx. 3 месяца назад

Its always so annoying looking up a tutorial and seeing a bunch of functions I can't use when I literally just want to change the color of text

@simonadouglas 2 года назад

A clear, concise explanation. However, have you really used a to create a numbered list? Would an not have been more suitable?

@nateward7120 Месяц назад

Really helpful. I’ve been struggling for a couple of days, and this pointed me in the right direction.

@sergioernestotostadosanche5700 2 года назад

Sublime explanation, clear & sample, also you motivate us to do it ourselves. Congratulations bro!

@nahlayasmine924 Год назад

I’m so impressed with your teaching skills,thank you 🙂

@olebogengrasebitse3550 Год назад

Your explanation was very clear and easy to follow. Thanks!

@sbasalan 2 года назад

Thank you for this valuable tutorial, Dom.

@seangrogan3622 2 года назад

super clear and useful, thanks

@theleeclan00 2 года назад

Clear and clean explanation, one of the best tutorials out there

@dcode-software 2 года назад

Glad you liked it!!

@erichrick5817 Год назад

You did well on this video. Really well done.

@unyimejacob7408 Месяц назад

You are a good teacher, thanks a lot.

@saqlain5275 2 года назад

Thanks. you saved my day.

@Ckk2024 2 года назад

Owesome! Thanks very much!!

@itis9555 8 месяцев назад

thanks for this great tutorial! i learned so much.

@DarylMalibiran 2 года назад

@dcode I haven't tried yet but some people are using return . Do you have a video for this?

@suvrotica 5 месяцев назад

Marvelous content ❤

@faiezwaseem2047 2 года назад

Nice info! 👍

@sta8hs13 2 года назад

Liked and subed. I like you. You must be a great teacher, cu around!

@jeenitprajapati3449 2 года назад

Wow!! Excellent!! Excellent💯👍👏

@dcode-software 2 года назад

😀👀

@retagif 2 года назад

Save my day! I´ve been struggling with these concepts, thank you very much! But what about inserting images with the img tag?.......

@djordjek3916 2 года назад

Of course you can. You can insert div and divs, p, headings, imgs, etc., inside the main div. You can also add classes and animations to all elements in the div but you have to style them in CSS first. The way I am referring to is insertAdjacentHTML(). I did that in my last project. Just take a block of code from HTML and then put it inside backticks in JavaScript, add all classes (if they are not already added in HTML) and inject it. Just like that. Easy. 😊 Try playing with it in Codepen.

@jamblob3208 Год назад

how is there a ul displaying numbered list hey? A bit of a fixup.

@amircahyadi9219 2 года назад

❤️❤️👍

@strategistaow3520 6 месяцев назад

Can you make larger progect

@Dr.smileclinic 2 года назад

Wow

@ban_droid 2 года назад

I just thinking about what you mean by "create html dynamically with javascript" is creating html file and open the html file with some kind of web server to open html pages using javascript 😂

@lol-eq8os Год назад

love you

@suelingsusu1339 2 года назад

🙏🙏🙏🙏🙏🙏🙏🖖🖖🖖🖖🖖🖖🖖🖖

@randalfjohn9848 2 года назад

Very long process and code with this method

@rishiktiwari 2 года назад

Well it is more of a necessity now days as things are moving to SPAs and when the app logic is on client side instead of server side. A more efficient way would be to use document fragment to dynamically generate HTML.