DOM methods part 2
What is createElement()? It is used to create a new HTML element using...
Full article excerpt tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3734090) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Nanthini Ammu Posted on Apr 28 DOM methods part 2 #webdev #javascript #beginners #tutorial What is createElement()? It is used to create a new HTML element using JavaScript. Creating an element is a multi-step workflow because the element is added in JavaScript memory, not on the screen. It consist of 3 step. Create element - let par = document.createElement("p") Add content - par.innerText = "Papaya" Add to DOM - document.body.appendChild(par) <body> <p class="box">Apple</p> <p class="box">Orange</p> <p class="box">Banana</p> <script> let par = document.createElement("p") par.innerText = "Papaya" document.body.appendChild(par) </script> </body> Enter fullscreen mode Exit fullscreen mode <body> <p class="box">Apple</p> <p class="box">Orange</p> <p class="box">Banana</p> <button id="bttn">Add Paragraph</button> <script> const btn = document.getElementById("bttn"); btn.addEventListener("click",()=> { let par = document.createElement("p") ; par.innerText = "New Paragraph Added"; par.style.color ="red"; par.setAttribute("class","paragraph") document.body.appendChild(par) console.log(par) } ) </script> </body> Enter fullscreen mode Exit fullscreen mode Append in Specific Element: <body> <p class="box">Apple</p> <div id="container"></div> <button id="bttn">Add Paragraph</button> <script> let par = document.createElement("p") par.innerText ="Hi"; const cont = document.getElementById("container") cont.appendChild(par); console.log(par) </script> </body>  Enter fullscreen mode Exit fullscreen mode Example Dynamic list: <body> <p class="box">Apple</p> <script> let lst = document.createElement("ul"); for(let i=1; i<=3; i++){ let li = document.createElement("li"); li.innerText ="Item "+i; lst.appendChild(li); } document.body.appendChild(lst); </script> </body> Enter fullscreen mode Exit fullscreen mode Top comments (0) Subscribe Personal Trusted User Create template Templates let you quickly answer FAQs or store snippets for re-use. Submit Preview Dismiss Code of Conduct • Report abuse Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse
This excerpt is published under fair use for community discussion. Read the full article at DEV Community.
Discussion
0 commentsMore from DEV Community
