在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>"; 
} 

的HTML应该是这样的指标0：

<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为了获得吸尘器溶液。

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

Answer 3

id='idWithIndex_"+i+"' 

你需要打出来的字符串，然后用+变量串联。

步骤：

1. “idWithIndex_”是您的固定字符串的第一部分
2. 与+你一些东西附加到前半部分
3. 我们变量后追加可变i
4. 我们使用另一个+附加其他固定字符串。

而且输入你的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的值添加到div中，而不是字符串"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，而不是一个普通的字符串，因为它可以让你轻松创建多线串，便于阅读的嵌入式HTML。这对代码的可维护性有很大的帮助。任何最近的浏览器supports他们（IE不是最近;如果你必须支持它，你有我的吊））。