I am trying to simulate something like reddit where you can write a text and email and when you submit, they post in a "div". Somehow when I compiled it on stack overflows web compiler it console.logged the giving text but not as "p" inside a "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 will return an array-like like objects which has post class. So you have to get elements from that array-like objects. You can use index here as
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>