如何动态定位动态生成且携带唯一ID的Div元素并完成操作？

• 计数器更新时机错误：你给新建div设置id为divGod + counter后立刻执行了counter++，后续通过document.getElementById('divGod'+counter)查询时，用的是自增后的counter值，和实际生成的div id完全不匹配，自然找不到目标元素，append操作必然失败。
• 元素挂载对象错误：你把计数段落newP2直接挂载到了外层的container-p容器下，没有放到新生成的div内部，所以会出现在目标div外。
• 段落id重复：当前代码段落id写死为radnja-1，多次点击生成会出现id重复的问题，不符合你要唯一ID的需求。

<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">
    <title>Document</title>
</head>
<body>
    <div style="height: 150px;"></div>
    <div>
        <input list="browsers" id="newTask">
        <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Google Chrome">
            <option value="Opera">
            <option value="Safari">
          </datalist>
        <button onclick="createP()">Klikni</button>
    </div>

    <div id="container-p" style="width: 1000px; margin: auto;">
         <h1 id="mojHeader">Moje Radnje</h1>
    </div>

<script>
    var counter = 0;
    function createP() {
      var input1 = document.getElementById("newTask");
      var inputVal = input1.value.trim();
      if(!inputVal) return; // 空输入拦截，避免生成无效内容
            
      // 新建外层div，设置唯一id
      var newDiv = document.createElement("div");
      newDiv.id = 'divGod' + counter;
   

      // 新建文本段落，设置唯一id和类名
      var newP = document.createElement("p");
      newP.innerText = inputVal; // 用innerText避免XSS问题，也不会触发innerHTML相关错误
      newP.id = "radnja-" + counter;
      newP.className = "radnja-" + counter;

      // 新建计数段落
      var newP2 = document.createElement("p");
      newP2.innerText = counter + 1; // 显示计数从1开始，符合使用习惯

      // 新建编辑按钮，设置唯一id
      var editBtn = document.createElement("button");
      editBtn.innerText = "编辑内容";
      editBtn.id = "editBtn-" + counter;
      // 后续可直接给该按钮绑定点击事件，实现编辑逻辑

      // 所有子元素挂载到新生成的div内部
      newDiv.appendChild(newP);
      newDiv.appendChild(newP2);
      newDiv.appendChild(editBtn);

      // 组装完成的div挂载到外层容器
      document.getElementById("container-p").appendChild(newDiv);

      // 所有元素处理完成后再更新计数器，保证下一次生成id唯一
      counter++;
      // 清空输入框
      document.getElementById("newTask").value = "";
    }

</script>

<style>
[class^="radnja-"] { /* 属性选择器匹配所有radnja开头的类，不需要重复写样式 */
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    color: blue;
    font-size: 20px;
    margin-right: 20px;
}

#container-p {
    justify-content: start;
    text-align: justify;
}

#mojHeader {
    display: block;
}
</style>
</body>
</html>

• 调整了计数器的更新时机：所有元素的id都用当前counter值生成完成后，再执行counter自增，彻底避免id不匹配的问题。
• 直接用创建div时保存的newDiv变量挂载子元素，不需要再走DOM查询找元素，既提升性能也不会出现找不到元素的问题。
• 所有元素的id、类名都和counter绑定，保证全局唯一，完全符合你的需求。
• 新增了编辑按钮并绑定了唯一id，你可以直接基于这个按钮扩展编辑逻辑。
• 优化了样式规则，用属性选择器匹配所有段落的样式，不需要每次生成新段落都单独写样式。
• 替换innerHTML为innerText，避免XSS安全问题，也不会出现你担心的innerHTML引发的其他错误。

内容的提问来源于stack exchange，提问作者Marko Zekanović