JavaScript按钮点击事件添加内容报错：insertAfter等方法未定义

嘿，别担心！作为编程新手，遇到这类DOM操作的小坑太正常了，咱们来一步步把你的问题捋清楚～

先说说你代码里的两个核心错误： #

1. DivT.appendChild(DelTesto) 不是函数
   你用了 document.getElementsByTagName('div')，这个方法返回的是一个HTMLCollection（包含页面所有div的类数组集合），而不是单个DOM元素。集合本身没有appendChild方法，你得获取到你目标的那个div才行。

2. DivI.insertAfter(p, Div) 不是函数
   DOM元素本身并没有insertAfter这个原生方法，正确的做法是利用父元素的insertBefore方法，或者用更直观的after()方法（现代浏览器都支持）。

修正后的完整代码 #

HTML部分（去掉了按钮上多余的onloadend事件，按钮不需要这个）：

<input type="text" id="scrivimi">
<button type="button" onclick="Cliccando()">Clicca</button>
<div id="Div"></div>

JavaScript部分：

function Cliccando() {
  var testo2 = document.getElementById('scrivimi').value;
  // 精准获取目标div
  var targetDiv = document.getElementById('Div');

  if (testo2.trim() !== '') { // 用trim()过滤纯空格的情况，体验更友好
    alert('js qualcosa scritto');
    console.log(testo2);
    var DelTesto = document.createTextNode(testo2);
    // 可选：清空div原有内容，避免重复追加
    targetDiv.innerHTML = '';
    targetDiv.appendChild(DelTesto);
  } else {
    alert('js vuoto');
    var p = document.createElement("p");
    var Contenuto = document.createTextNode('Scrivi del testo');
    p.appendChild(Contenuto);
    // 用after()方法直接在div后面插入p元素，简单直观
    targetDiv.after(p);
  }
}

额外小提示： #

如果不想每次空输入都在div后新增重复的提示p标签，可以先检查页面中是否已经存在这个提示元素，存在的话就复用或者移除后再创建，避免DOM元素冗余。

内容的提问来源于stack exchange，提问作者Vittorio D'angiolino