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

问题出在这一行：

lenght

javascript中不存在

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

另外，对于连接，请使用：

string

或使用ES6中的document.getElementById("rotate").innerHTML+=`<div><div><a href="" id="idWithIndex_${i}">`; 模板以获取更清晰解决方案。

{{1}}

Answer 2

现在你的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 3

id='idWithIndex_"+i+"'

你需要突破字符串，然后与+变量连接。

分步骤：

＆＃34; idWithIndex _＆＃34;是固定字符串的第一部分
使用+向前一部分添加内容
我们追加变量i
在变量之后，我们使用另一个+附加其余的固定字符串。

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

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

＆＃13;

 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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

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，而不是字符串{{1} }。

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访问相对昂贵，每次循环通过getElementById进行3次innerHTML次查询和3次更改，这会产生大量不必要的开销。在大多数情况下，它可能并不重要，但如果lines中有很多项目，它可能会使浏览器瘫痪。最好是构建一个你正在注入的HTML字符串，然后注入一次：

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

我使用template literal而不是普通字符串，因为它允许您轻松创建多行字符串，以便于读取嵌入式HTML。这对代码的可维护性有很大帮助。任何最近的浏览器supports他们（IE不是最近的;如果你必须支持它，你有我的哀悼）。

在javascript中定义div id

7 个答案: