在 javascript 中定义 div id

Question

在 javascript 中使用 for 循环创建多个 html div。

for(var i = 0; i < lines.length; i++){
     document.getElementById("rotate").innerHTML+="<div><div><a href='' id='idWithIndex_i'>";
     document.getElementById("idWithIndex_i").innerHTML+=lines[i];
     document.getElementById("rotate").innerHTML+="</a></div></div>";
}

索引 0 的 html 应如下所示：

<div>
     <div>
          <a href='' id='idWithIndex_0'>
               line1
          </a>
     </div>
</div>

我想在主播的id中定义索引。如何更改 javascript？谢谢。

Answer 1

现在您的 i 只是字符串的一部分，这就是您想要的：

for(var i = 0; i < lines.length; i++){
     document.getElementById("rotate").innerHTML+="<div><div><a href='' id='idWithIndex_" + i + ">";
     document.getElementById("idWithIndex_" + i).innerHTML+=lines[i];
     document.getElementById("rotate").innerHTML+="</a></div></div>";
}

Answer 2

问题出在这一行：

for(var i = 0; i < lines.lenght; i++){

lenght 在 javascript 中不存在。请改用 length。

另外，对于连接，使用这个：

document.getElementById("rotate").innerHTML+='<div><div><a href="" id="idWithIndex_'+i+'">';

或使用 string 来自 ES6 的模板 以获得 cleaner 解决方案。

document.getElementById("rotate").innerHTML+=`<div><div><a href="" id="idWithIndex_${i}">`;

Answer 3

id='idWithIndex_"+i+"'

您需要断开字符串，然后与 + 变量连接。

步骤：

"idWithIndex_" 是固定字符串的第一部分
用 + 你在前面的部分附加了一些东西
我们附加变量 i
在变量之后，我们使用另一个 +.

同时输入您的 for 循环：length 而不是 lenght

有更好的方法可以做到这一点：

 var counter = 0;
 
 //method 1 - createElement
 document.querySelector("#add_method1").addEventListener("click", function(){
 //add a click event to the add button
 
 var node = document.createElement("div"); //create a new element
 var innernode = document.createElement("div"); //create second node
 var linknode = document.createElement("a");
 
 linknode.setAttribute("href", '');
 linknode.setAttribute("id", "idWithIndex_" + counter) //set id
 linknode.innerHTML += "test"+counter; //lines[i] in your code;
 counter++;
 
 //time to append
 innernode.appendChild(linknode);
 node.appendChild(innernode);
 document.getElementById("rotate").appendChild(node);
 },true);
 
  //method 2 - cloneNode
 document.querySelector("#add_method2").addEventListener("click", function(){
 //add a click event to the add button
 var cloned = document.querySelector(".copynode").cloneNode(true); //true for deep cloning
 cloned.removeAttribute("class"); //remove class
 var a = cloned.querySelector("div > a"); //select link
 a.setAttribute("id", "idWithIndex_" + counter) //set id
 a.innerHTML += "test"+counter; //lines[i] in your code;
 counter++;
 
 //time to append
 document.getElementById("rotate").appendChild(cloned);
 },true);

/*css for method 2 */
.hidden {
  display: hidden;
}

<div id="rotate"></div>
<button id="add_method1">add using document.createElement</button>
<button id="add_method2">add using element.cloneNode</button>


<!-- html for method 2 -->
<div class="copynode hidden">
  <div>
    <a href=""></a>
  </div>
</div>

Answer 4

for(var i = 0; i < lines.length; i++){
     document.getElementById("rotate").innerHTML+="<div><div><a href='' id='idWithIndex_"+i+"'>";
     document.getElementById("idWithIndex_"+i).innerHTML+=lines[i];
     document.getElementById("rotate").innerHTML+="</a></div></div>";
}

首先，您在 .lenght 处有一个类型。

此外，"i"不是字符串的一部分，它是一个变量，所以你需要添加i的值作为div的id，而不是字符串 "i"。

Answer 5

试试这个

for(var i = 0; i < lines.lenght; i++){
 document.getElementById("rotate").innerHTML+="<div><div><a href='' id='idWithIndex_"+i+"'>";var id = "idWithIndex_"+i;
 document.getElementById(id).innerHTML+=lines[i];
 document.getElementById("rotate").innerHTML+="</a></div></div>";

}

Answer 6

var lines = [1,2,3,4]
var i;
for(i = 0; i < lines.length; i++){
     document.getElementById("rotate").innerHTML+="<div><div><a href='' id='idWithIndex_"+i+"'> " + lines[i]+"</a></div></div>";
}

<div id="rotate">Hi</div>

Answer 7

正如其他人提到的，您需要将值连接到字符串中或使用模板字符串将它们注入字符串。

我想建议一点重构。 DOM 访问相对昂贵，每个循环有 3 个 getElementById 查询和 3 个通过 innerHTML 对 DOM 的更改，这会产生很多不必要的开销。在大多数情况下，这可能无关紧要，但如果 lines 中有很多项目，它可能会使浏览器崩溃。最好构建一个你正在注入的 HTML 的字符串并且只注入一次：

let lines = ['a', 'b', 'c'];
let linesHtml = ''; // buffer for the HTML we are building

for(let i = 0; i < lines.length; i++) {
  // there is no need to create the link and then inject content into it,
  // we can just inject the content right into the element in the HTML
  linesHtml += `<div>
    <div>
      <a href='' id='idWithIndex_${i}'>
        ${lines[i]}
      </a>
    </div>
  </div>`;
}
// now that we know what we are injecting, make a single DOM update
document.getElementById("rotate").innerHTML += linesHtml;

div {
 border: 1px solid #000;
 padding: 3px;
}

<div id="rotate"></div>

我用了 template literal instead of a normal string because it allows you to easily create multi-line strings, for easily readable embedded HTML. This can help a lot with the maintainability of your code. Any recent browser supports 它们（IE 不是最新的；如果你必须支持它，我的哀悼）。

在 javascript 中定义 div id

Define div id inside javascript

html

javascript

loops

innerhtml

getelementbyid