Добавление динамического элемента — одна из сложных задач для новичка, который только начал изучать веб-разработку и начал создавать проекты, похожие на список дел.
Здесь, в этой статье, я буду рассматривать рабочий и понятный код.
Первый пример::
HTML Code <html> <body> <button onclick="create()">Create Heading</button> </body> </html> Javascript code:: function create() { var h1 = document.createElement('h1'); h1.textContent = "New Heading!!!"; document.body.appendChild(h1); }
Второй пример::
HTML Code <body> <h1>My ToDo List</h1> <input type="text" id="getValues" /> <button onclick="myFunction()"> Add task </button> </body> Javascript Code:: function myFunction(){ var inputValue = document.getElementById("getValues").value; var li= document.createElement('li'); li.textContent= inputValue; document.body.appendChild(li); console.log("The value in the text box is ="+inputValue); }
Практикуйте оба примера, вы поймете это.
Я регулярно публикую в твиттере контент на основе javascript, html, css и angular. Пожалуйста, следите за ними в твиттере, чтобы получить интересную концепцию, основанную на javascript.