为何创建<p>元素并追加到<div>中无法生效

你的代码存在2处核心错误，修改后即可正常运行：

• 错误1：getElementsByClassName返回的是类数组的HTML集合，不是单个DOM元素，无法直接调用appendChild方法
  修正：获取元素时指定集合的第一个索引，或者直接用querySelector选择单个元素：

  // 改法1 加[0]取第一个匹配元素
  let posts = document.getElementsByClassName('post')[0];
  // 改法2 更推荐的单个类选择器写法
  let posts = document.querySelector('.post');
  

• 错误2：script标签放置位置错误，你的代码把<script>放在body最顶部，执行时后续的DOM元素还没渲染，所有DOM查询操作返回的都是null
  修正两种二选一即可：
  1. 把HTML里的<script src="script.js"></script>移到</body>闭合标签的前面
  2. 给所有JS逻辑套上DOM加载完成的监听：

  document.addEventListener('DOMContentLoaded', function() {
    let submit = document.getElementById('submit');
    let inputfield = document.getElementById('input-field');
    let mail = document.getElementById('mail-field');
    let posts = document.querySelector('.post');
  
    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 = "";
    })
  })
  

如果需要保留邮箱展示逻辑，自行补充对应读取mail.value插入到节点的代码即可。

内容的提问来源于stack exchange，提问作者Turhan Ergene