CODEWITHSUNDEEP
javascripthtmljquery
user16776772
user16776772

Reputation:

Trying to add ids for anchor tag at the time of creating li tags

I have the following JS Fiddle https://jsfiddle.net/73rpubfd/ working fine. Pasting the code here for reference:

<ul class="nav nav-tabs" id="test">
</ul>

var items=['a1','a2'];

var arrayLength = items.length;

for (var i = 0; i < arrayLength; i++) {
   
   $("#test").append("<li><a>"+items[i]+"</a></li>");
    
}

My requirement is to insert an id for the tag and part of the id value will be coming from the the array values .

So, I would expect it to be like this inside the loop :

$("#test").append("<li><a id="tab_"+items[i]+">"+items[i]+"</a></li>");

And basically it would probably look something like this after inspecting the li element in the developer tools of chrome.

<li><a id="tab_a1">a1</a></li>
<li><a id ="tab_a2">a2</a></li>

But as soon as I try to define `id = tab_" it starts complaining. Am I doing something wrong?

Upvotes: 0

Views: 51

Answers (3)

spirift
spirift

Reputation: 3062

I think it's an issue with the format of the html props needing double quotes. The best way to create complex strings is to use template literals like so:

$("#test").append(`<li><a id="tab_${items[i]}">${items[i]}</a></li>`);

Upvotes: 1

Zeeshan Ahmad
Zeeshan Ahmad

Reputation: 5644

You need to escape the double quotes if they appear within another quotes.

$("#test").append("<li><a id=\"tab_\">"+items[i]+"</a></li>");

The other solution is to use backticks:

$("#test").append(`<li><a id="tab_">${items[i]}</a></li>`);

Upvotes: 0

navnath
navnath

Reputation: 3714

Using Template literals can contain placeholders indicated by ${expression} and useful for string interpolation

var items=['a1','a2'];

var arrayLength = items.length;

for (var i = 0; i < arrayLength; i++) {
   const li = `<li><a id="tab_${items[i]}">${items[i]}</a></li>`;
   $("#test").append(li);
   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="nav nav-tabs" id="test">
</ul>

Or in one line and without jQuery

Use array map method and transform each array item to li html and lastly join by empty.

const html = items.map(item => `<li><a id="tab_${item}">${item}</a></li>`).join('');

$("#test").append(html);

Upvotes: 0

Related Questions