उदाहरण
कार्य सूची बनाने के लिए निम्नलिखित कोड है -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> <input type="text" placeholder="Please Enter your Task Here.." id="txtData"> <button onclick="todoList()">AddTaskToDo</button> <ul id="to_do_list"> </ul> </body> <script> function todoList() { const myTask = document.getElementById('txtData'); const addToDoList = document.getElementById('to_do_list'); let originalValue = `<li> ${myTask.value} </li>`; myTask.value = ''; addToDoList.insertAdjacentHTML('beforeend', originalValue); } </script> </html>
उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम "anyName.html(index.html)" को सेव करें। फ़ाइल पर राइट क्लिक करें और VSCode संपादक में "लाइव सर्वर के साथ खोलें" विकल्प चुनें -
यह निम्नलिखित आउटपुट देगा -
अब यहाँ, मैं पहला कार्य दर्ज करने जा रहा हूँ।
पहला कार्य दर्ज करने के बाद, बटन पर क्लिक करें।
आउटपुट
यह कंसोल पर निम्न आउटपुट उत्पन्न करेगा -
फिर से, मैं एक और कार्य में प्रवेश कर रहा हूँ।
बटन पर क्लिक करने के बाद, आपको निम्न आउटपुट मिलेगा -