JS动态创建div设置value属性后点击获取返回undefined问题

div属于普通非表单元素，本身不存在原生的.value DOM属性。
你通过setAttribute("value", xxx)设置的是HTML标签上的自定义特性（attribute），这类特性不会自动映射为DOM对象上的属性（property），因此直接通过e.target.value读取时会返回undefined。

补充属性和特性的区别：只有<input>、<select>、<textarea>这类原生表单元素，自身的value attribute才会和DOM对象的.value property做双向绑定，普通元素没有这个默认映射逻辑。

你可以根据自己的编码习惯选任意一种：

• 方案1：读取自定义特性时用getAttribute方法

  // 点击事件回调中修改读取逻辑
  console.log(e.target.getAttribute("value"))
  

• 方案2：直接给DOM对象挂载属性，不依赖setAttribute映射

  // 创建元素时直接给DOM对象赋值
  tag.value = item;
  // 后续直接读e.target.value即可拿到对应值
  

• 方案3：遵循HTML自定义属性规范，用data-*前缀存自定义值

  // 设置属性时加data-前缀
  tag.setAttribute("data-value", item);
  // 读取时通过datasetAPI拿值
  console.log(e.target.dataset.value)
  

你当前把事件绑定在.newtags元素上，如果div内部存在子节点，点击时e.target可能会捕获到内部子元素而非绑定事件的外层div，导致取值失败。稳妥写法是把读取目标换成e.currentTarget，它永远指向绑定事件的元素本身：

newtags.forEach(item => {
  item.addEventListener("click", e =>{
    // 用e.currentTarget代替e.target
    console.log(e.currentTarget.getAttribute("value"))
  })
})

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