时间戳

首页 > 解决方案 > 如何动态定位同样动态创建并具有唯一 ID 的 Div？

javascript - 如何动态定位同样动态创建并具有唯一 ID 的 Div？

问题描述

我对 javascript 非常陌生，我需要一些帮助。我想要做的是按下一个按钮，然后这个按钮创建一个 div（具有唯一 ID），并且在 div 内部也是一段文本（也具有唯一 ID）和一个用于编辑该 div 内容的按钮。每次单击按钮时，它都应该创建一个带有段落的新 div（都具有新的唯一 ID；div1、div2、div3 等）。

我似乎无法让它工作，因为；当我创建新的 div 并尝试将段落放入该 div 时，我无法让 getElementbyID 工作。我使用counter++来获取唯一的div ID名称，所以div的ID名称为=“divGod”+counter。

之后我尝试使用；document.getElementbyID("divGod" + counter).append child 但它似乎不起作用。在我看来，这应该可行，但我很新，我不知道为什么不可行。

我也不想做以下方法：

var newDiv = document.createElement("div");
newDiv.innerHTML = "<p>nsdcvjnvso vsvos</p>

因为这种方法会产生一些我无法修复的其他错误。

所以基本上我创建了一个 DIV 并用计数器给它 uniqueID：

var newDiv = document.createElement("div");
newDiv.setAttribute("id", 'divGod' + counter);
counter ++;

后来我尝试将新创建的 DIV 定位为：

document.getElementById('divGod'+counter).appendChild(newP);

如果我以已经存在的其他 div 为目标，则创建 div 并且该段落位于 div 之外。

基本上我想让一个人输入一个文本，我在一个新 div 的一个段落中写出该文本，并且还有一个按钮来更改输入的文本。

我做错了什么，我怎样才能实现我想要做的事情？谢谢

<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");
            
      // novi div
      var newDiv = document.createElement("div");
      newDiv.setAttribute("id", 'divGod' + counter);
      counter ++;
   
  

      // isprintaj div
      document.getElementById("container-p").appendChild(newDiv);


    // novi paragraph
    var newP = document.createElement ("p");
    newP.innerHTML = input1.value;
    newP.id = "radnja-1";
    newP.className = "radnja-1";

// dodaj novi paragraf sa counterom
    var newP2 = document.createElement("p");
    newP2.innerHTML = counter;

// dodaj opet nešto
    
    
// egzekucija
    document.getElementById('divGod'+counter).appendChild(newP);
    document.getElementById("container-p").appendChild(newP2);
    document.getElementById("newTask").value="";

 
    }

    

</script>




<style>
.radnja-1 {
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    color: blue;
    font-size: 20px;
}

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

#mojHeader {
    display: block;
}

</style>









</body>
</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">
    <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");
    

    
// novi div
      var newDiv = document.createElement("div");
      newDiv.setAttribute("id", 'divGod' + counter);
      counter ++;
   
  

// isprintaj div
document.getElementById("container-p").appendChild(newDiv);


// novi paragraph
    var newP = document.createElement ("p");
    newP.innerHTML = input1.value;
    newP.id = "radnja-1";
    newP.className = "radnja-1";

// dodaj novi paragraf sa counterom
    var newP2 = document.createElement("p");
    newP2.innerHTML = counter;

// dodaj opet nešto
    
    
// egzekucija
    document.getElementById('divGod'+counter).appendChild(newP);
    document.getElementById("container-p").appendChild(newP2);
    document.getElementById("newTask").value="";

 
    }

    

</script>




<style>
.radnja-1 {
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    color: blue;
    font-size: 20px;
}

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

#mojHeader {
    display: block;
}

</style>









</body>
</html>

标签： javascript

解决方案

使用insertAdjacentHTML()方法并使其更容易。

let element = "<div id='div-" + i + "'><p id='p-" + i + "'>" + paragraphContent + "</p></div>";
parent.insertAdjacentHTML("beforeend", element);

更具可读性：

let element;
element = "<div id='div-" + i + "'>";
element += "<p id='p-" + i + "'>";
element += paragraphContent;
element += "</p>";
element += "</div>";
parent.insertAdjacentHTML("beforeend", element);

推荐阅读