Replace innerHTML with attribute value for each element with class

Question

Please consider this HTML:

<a class="title" threedots="Product Name 1"></a>
<a class="title" threedots="Product Name 2"></a>
<a class="title" threedots="Product Name 3"></a>

I want to change it to this:

<a class="title" threedots="Product Name 1">Product Name 1</a>
<a class="title" threedots="Product Name 2">Product Name 2</a>
<a class="title" threedots="Product Name 3">Product Name 3</a>

using JavaScript or jQuery. I can change the first occurrence only with this:

var fullName = document.getElementsByClassName("title")[0].getAttribute("threedots");
document.getElementsByClassName("title")[0].innerHTML = fullName;

But I need help writing a script that can change all of the occurrences. I have researched foreach and HTMLcollection, but I don't understand them. Can someone point me in the right direction for writing a script that will find each <a class="title"> and grab the value for its threedots attribute and inject it in?

`threedots` is not a valid attribute. You can use `data-threedots` instead. — Oriol, Jan 26 '16 at 01:52

Josh Crozier · Answer 1 · 2016-01-26T01:56:05.293

You could simply select all the elements by their [threedots] attribute and class name, then iterate over them using a simple for loop:

var elements = document.querySelectorAll('.title[threedots]');
for (var i = 0; i < elements.length; i++) {
  elements[i].textContent = elements[i].getAttribute('threedots');
}

Or using .forEach():

var elements = document.querySelectorAll('.title[threedots]');
Array.prototype.forEach.call(elements, function (el) {
  el.textContent = el.getAttribute('threedots');
});

As a side note, since you're only changing text, you can use the .textContent property rather than .innerHTML. In addition, threedots isn't a valid attribute. Consider using a data-* attribute such as data-threedots:

<a class="title" data-threedots="Product Name 1"></a>
<a class="title" data-threedots="Product Name 2"></a>
<a class="title" data-threedots="Product Name 3"></a>

Then you can access the the property .dataset.threedots:

var elements = document.querySelectorAll('.title[data-threedots]');
for (var i = 0; i < elements.length; i++) {
  elements[i].textContent = elements[i].dataset.threedots;
}

Since you mentioned jQuery, you could also use the following:

$('.title[data-threedots]').text(function () {
  return $(this).attr('data-threedots');
});

In jQuery you can also use `$(this).data('threedots')` – Oriol Jan 26 '16 at 02:29 — Oriol, Jan 26 '16 at 02:29

Mandera · Accepted Answer · 2016-01-26T02:06:05.467

1

So instead of only using the first index of document.getElementsByClassName("title") we can iterate it.

var titles = document.getElementsByClassName("title");

for(var i = 0; i < titles.length; i++) {
  
  var title = titles[i];
  
  title.innerHTML = title.getAttribute("threedots");
}

a {
  display: block;
}

<a class="title" threedots="Product Name 1"></a>
<a class="title" threedots="Product Name 2"></a>
<a class="title" threedots="Product Name 3"></a>

edited Jan 26 '16 at 02:06

answered Jan 26 '16 at 01:52

Mandera

2,647
3
21
26

2

See [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/q/500504/1529630) – Oriol Jan 26 '16 at 01:54

score 0 · Answer 3 · answered Jan 26 '16 at 02:01

You select all anchor elements using jQuery and set it.

$('a').each(function(){
  $(this).html($(this).attr('threedots'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="title" threedots="Product Name 1"></a>
<a class="title" threedots="Product Name 2"></a>
<a class="title" threedots="Product Name 3"></a>

Replace innerHTML with attribute value for each element with class

3 Answers3