Up next in 10
HTML Insertion Methods _ JavaScript Tutorial in Hindi #43
139 views
Feb 9, 2024
"HTML Insertion Methods" is the 43rd tutorial in a series of JavaScript tutorials presented in Hindi. In this video, viewers will learn about various methods available in JavaScript for inserting HTML content dynamically into web pages. The tutorial likely covers methods such as `innerHTML`, `insertAdjacentHTML`, `appendChild`, `insertBefore`, and `createDocumentFragment`, which enable developers to add new elements or HTML content to the DOM tree at specified locations. Through practical examples and explanations in Hindi, viewers will gain a comprehensive understanding of how to use these insertion methods effectively to create dynamic and interactive web applications. This tutorial is tailored for Hindi-speaking audiences seeking to enhance their skills in JavaScript and web development.
View Video Transcript
0:00
Web Programming में एक बहुत दिपिकल यूज केस होता है कि आप लोग को DOM के अंदर कुछ elements को insert करना पड़ता ह�
0:06
At the same time कभी-कभी आप लोगों को अलग-अलग तरीके से insert करना होग�
0:11
क्योंकि कुछ तरीके easy पड़ेंगे आप लोगों को से स्प्रेसिफिट टाइप टास्क करने के लि�
0:16
और कुछ चीज़े आप लोगों को इजी पड़ेंगी जब आप दूसरी तरीकों से करोग�
0:20
इसलिए सारे तरीके इंसर्चन के आना हम लोगों को बहुत जाधा ज़रूरी ह�
0:24
चलते हैं कंप्यूटर स्क्रीन में और देखते हैं कि JavaScript को कैसे इस्तेमाल किया जा सकता ह�
0:28
when it comes to insertion of a node inside your DOM let's get started
0:34
चला भाई so guys अब हम लोग चर्चा करने वाले हैं कि किस तरह से हम लोग insert कर सकते है�
0:44
अपनी HTML के अंदर कुछ और elements, कुछ और tags तो उसी की बात करने वाला हूँ मैं इस वीडियो में आप लोगों स�
0:50
सबसे पहले मैं यहाँ पर अपनी Ripple में आओंगा और इस Ripple के अंदर कुछ HTML डालूँग�
0:54
मानलो मैंने यहाँ पर लिखा और मैंने लिखा div class is equal to container
0:58
और इसके अंदर मानलो मैंने लगा दिया और उसकी बाद मान लो मैं यहां पर लिखता हूं कुछ इस तरह से डिव आईडी इस एक्वल टू फर्स्ट और यहां प�
1:09
आई एम फर्स्ट एलिमेंट ठीक है और यहां पर मैं डेव को क्लोज कर दूंगा ठीक है ठीक तो है अब आप लोगो�
1:21
देना चाहता हूं कि इसका प्रीव्यू इस तरह से दिखा ही पड़ रहा है ठीक है तो इसका प्रीव्यू को देखने क�
1:26
लिए हम क्या करेंगे यह क्लिक करेंगे और यह नहीं टैप में खुलेगा और स्क्रिप्ट डॉट जेस को यहां पर मै�
1:33
खोलकर आप लोगों को दिखाऊंगा और इसके बाद दिखाऊंगा कि मैं इसके अंदर एलिमेंट को कैसे इनसर्ट क�
1:38
सकता हूं एक क्लासिकल तरीका एलिमेंट को इनसर्ट करने का मेरे पास यह है कि मैं यहां पर लिखो डॉक्यूमें�
1:44
गेट एलिमेंट बाई टैग नेम ठीक है और मैं कहूँ कि यार मुझे पहला सेक्शन दे दो ठीक है मैं कहूँ कु�
1:54
इस तरह से ठीक है और मैं एक छोटा सा चेंज करूँगा इसमें और अगर आप लोगों को यार यह लग रहा है कि य�
2:01
जैसे जनरेट हो गया कहां से आया यह कोड तो जस्ट आप लोगों बताना चाहता हूं कि यह रप्लेट के एक फीच�
2:09
एक काम करता हूं यहां पर लेट इस इकॉल टू रप्लेट में भी एयर मोड आ गया है जिसकी वजह से मुझे सारे सजेश�
2:15
जा रहा है विच इस ग्रेट या ठीक है अच्छा तो यह टोट हटीएमल इज एकॉल टो एड ऑट इनर इस टीम प्लस थेस मै�
2:35
प्लस हेलो वर्ड तो यहां पर हेलो वर्ड आया क्यों नहीं अर태 आया क्यों नहीं भाई यहां पर हेलो वर्ड यह क्य�
2:41
चल रहा है कोई नगर पालिका को बुला हो यार नगर पालिका को बुला रीक्शन चल रहा है कि नोट रिप्रॉपर्ट�
2:48
अंडिफाइन तो ओके तो यहां पर सेक्शन है ही नहीं मुझे डिव लेना चाहिए तो यह सेक्शन का से आ गया और डि�
2:53
डिव डिव है डिव सेक्शन नहीं है डिव टैग है और यहां पर देखो है लोग एंड इंसर्ट कर दिया ठीक है नो सर्प्राइ�
3:00
अब हम क्या करेंगे देखेंगे कुछ insertion के methods जो की हम लोग use कर सकते है�
3:06
अपनी convenience के लिए ठीक है तो सबसे पहला method जिसकी बात हम करेंग�
3:10
वो है append, prepend, before बट notes में देख लेते हैं मैंने क्या लिखा हुआ ह�
3:14
इससे बहले we looked at some ways to insert elements in the DOM
3:20
यह तरीका तो देखो यार हमने देखा यह बहुत इंट्यूटिव तरीका है कि बाई इनर एस्टीमल करके और जो है इंसर्चन कर लो ठीक है जो पुरानी इनर एस्टीमल है उसमें यह आड़ कर दो वो आड़ जाएगी डॉम में कोई बड़ी चीज नहीं है ठीक है अब मैं �
3:50
तो मैं लिख सकता हूँ div.innerHTML और hello word यह AI mode है आप लोग टाइप कर लेना और यह मत सोचना क�
3:56
क्यों नहीं काम कर रहा है टाइप कर लेना या ठीक है यहाँ पर हमारा time बच रहा ह�
4:00
मैं टाइप ना ही करूँ तो अच्छा है क्योंकि time बचेगा तो आप यहाँ पर देखो इसके बाद मैं क्या करूँगा एक अंदर एक चाइल्ड अपेंड कर दूँगा एड़ एपेंड चाइल्ड ठीक है तो मैं डॉक्यूमेंट डॉट बॉडी डॉट अपेंड भी कर सकता हूँ मैं चाहूँ तो एपेंड चाइल्ड मेथट कभी इस्�
4:32
supply for loops use 10 elements insert hello word 1 hello word 2 hello word 3 for loops string is equal to string convenient pure JavaScript document experience convenient
5:06
मुझे चोटी मोटी HTML insert करनी होती है मैं inner HTML का इस्तेमल कर लेता हू�
5:11
लेकिन मुझे अगर actually बहुत सारे elements strategically place करने है तब मैं document.create element का use करता हू�
5:17
ठीक है I hope आप लोग समझ रहे हो मैं क्या कह रहा हूँ ठीक है document.body.append
5:21
करूँगा तो body में append हो जाएगा वरना यह directly इस तरह स�
5:25
हम a.append child भी कर सकते हैं किसी भी element के एक child आड़ कर सकते है�
5:29
ठीक है बढ़िया here are some more insertion methods अगर मैं append करता हू�
5:35
तो end of note पे आएगा ठीक है अब मैं एक काम करता हूँ आप लोगों की convenience के लि�
5:39
एक मिट मैं यहाँ पर लिखूँगा आई एम स्टार्ट ऑफ जिस कंटेनर और इसके बाद मैं यहां पर लिख दूंगा आएए एंड ऑफ इस कंटेनर ठीक ह�
5:53
आई एम फर्स्ट एलिमेंट आई एम दी फर्स्ट एलिमेंट और याबर आई एम एंड ऑफ इस कंटेनर एम एंड ऑफ इस कंटेन�
6:02
इन आई ठीक है और यह इनर कर दूंगा ठीक है मतलब कंटीनर के अंदर है बट स्टार्ट ठीक है आप यहां प�
6:14
यहां पर यह ना करते हुए अब मालों मैं इसको एडिटल करूं ठीक है इस तरह से तब क्या होगा तब यह कुछ इ�
6:22
से आ जाएगा ठीक है अब यह मैंने अभी change किया है अगर मैं append ना करते हुए मान लो यह वाला method
6:27
use करूँ prepend ठीक है तो यह क्या करेगा आप लोग देखना और मैं इसको comment out कर दूँगा तब आ�
6:34
देखो जैसे ही मैं इसको pre-pend करूँगा तो यह कहाँ पर आएगा start of container से पहले अब मैं एक चीज और करता हू�
6:40
आप लोग एंडरस्टार्टिंग को बढ़ाने के लिए मैं ना यहाँ पर container के बाह�
6:46
और मैं यहाँ पर outer लिख देता हूँ हां ठीक है अब मैं इसको रिलोड करूंगा तो आप लोग देखोगी � Samantha और इनर के बीच में प्रीपेंड करने से क्या होग�
7:02
आप लोग इसको इंस्पेक्ट एलिमेंट करके भी देख सकते हो मैं रहा थोड़ा कंटेनर के अंदर लेकिन यह डिव कंटेनर क�
7:07
अधर ही रहेगा लेकिन क्या प्रीपेंड हो जाएगा ठीक है कंटीनर के अंदर सबसे पहले पहला चाइलों का वह ब�
7:13
जाएगा ठीक है इसके बाद नोट बिफोर अगर मैं करूंगा तो इस नोट से पहले जो है यहां पर यह डाल देगा इसक�
7:37
नोट डॉट आफ्टर, नोट डॉट आफ्टर भी काफी सिमिलर है, ठीक है, आ, नोट डॉट आफ्टर करोगे अगर, तो ये कहाँ पर डालेगा इसको, डेफिनेटली कंटेनर के बाहर डालते हैं, कंटेनर से बाहर, ठीक है, देखो, कंटेनर से बाहर डाल रहा है, कंटेनर क�
8:07
राउटर मार्क किये होगे ठीक है बढ़िया अब इसके बाद आप रिप्लेस विद का इस्तेमाल कर सकते हो आप इ�
8:14
नोट को रिप्लेस कर सकते हो किसी और नोट से ठीक है वो भी मैं आप लोगों करके दिखाता हूं तो यहां प�
8:19
क्या कर सकता हूँ कि इसको कमेंट आउट करके मैं कह सकता हूँ कि यार ए डॉट रिप्लेस विद ठीक है और मैं क्या करूंगा इसको किस से रिप्लेस कर दूँगा मैं डिव से रिप्लेस कर दूँगा पूरे एक हो मुझे पता है कि ये काफी बड़ा सरकस हो जाएगा बट म�
8:49
comment out कर रहा हूं और आप लोग इन को अन कमेंट करके प्राक्टिसिंग कर सकते हो ठीक है इस रेपल को फॉर्�
8:54
करना और रैपलेट यूज करने का फायदा सबसे बड़ा यह है कि आप लोग फॉर्क कर सकते हो डारेटली प्ले राउं�
8:58
सकते हो अगर मैं आप लोगों को गेटअप पर फिर साइट पर कोड दूंगा तो आपको अपना इंवायरमेंट पर सेट अप करन�
9:04
पड़ेगा फिर उसके बाद तो इसलिए मैं जो रापड का इस्तेमाल यहां पर कर रहा हूं तो काफी फायदा हो रहा ह�
9:08
use कर गई ठीक है so I hope की मज़ा आ रहा है आप लोगों को यार और मुاج़े नीच�
9:12
comment में बताओ यार की मज़ा आपको आ रहा है समझ में सारी चीज़े आ रही है क्या आपको project किस तरह के इस course के अंदर चाहिए आगे क्योंकि projects क�
9:20
बात करो तो मैं भी भी plan कर रहा हूँ ठीक है अभी भी plan कर रहा हूँ मैं और अब मैं चाहता हू�
9:24
कि आप लोग जो है मुझे बताओगी किस तरह के courses में आप interested रहोगे so अभी के लि�
9:29
इस वीडियो में इतने है गैस इस playlist को access करना यहाँ click करके bookmark करना यहा�
9:33
क्लिक करके सेव करना थैंक यू सो मज़ गाइस वो वाचिंग इस वीडियो एंड आई विल सी यू नेक्स्ट टाइ�
#Computer Education
#Scripting Languages