Estoy tratando de simular algo como reddit donde puedes escribir un texto y un correo electrónico y cuando lo envías, lo publican en un "div". De alguna manera, cuando lo compilé en la pila, el compilador web se desborda en la consola. Registró el texto dado pero no como "p" dentro de un "div"
let submit = document.getElementById('submit'); let inputfield = document.getElementById('input-field'); let mail = document.getElementById('mail-field'); let posts = document.getElementsByClassName('post'); console.log(inputfield) submit.addEventListener('click', function(){ console.log(inputfield.value) var paragraph = document.createElement('p') paragraph.classList.add('paragraph-styling'); paragraph.innerText = inputfield.value; posts.appendChild(paragraph); inputfield.value = ""; }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Dom Manipulation</title> </head> <body> <script src="script.js"></script> <nav id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <h1>Welcome to This Page</h1> <div class = "inputs"> <input id="mail-field" type="text" placeholder="Write your mail"> <textarea id="input-field" placeholder="Write something"></textarea> <button id="submit">Submit</button> </div> <div class="post" style="width:50%; margin: 0 auto;"> </div> </body> </html>getElementsByClassName devolverá un objeto similar a una matriz que tiene una clase de post . Por lo tanto, debe obtener elementos de esos objetos similares a una matriz. Puede usar index aquí como
posts[0].appendChild( paragraph ); let submit = document.getElementById('submit'); let inputfield = document.getElementById('input-field'); let mail = document.getElementById('mail-field'); let posts = document.getElementsByClassName('post'); submit.addEventListener('click', function() { var paragraph = document.createElement('p') paragraph.classList.add('paragraph-styling'); paragraph.innerText = inputfield.value; posts[0].appendChild(paragraph); inputfield.value = ""; }) <nav id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <h1>Welcome to This Page</h1> <div class="inputs"> <input id="mail-field" type="text" placeholder="Write your mail"> <textarea id="input-field" placeholder="Write something"></textarea> <button id="submit">Submit</button> </div> <div class="post" style="width:50%; margin: 0 auto;"> </div>