Clever Geek Handbook

Get the tagName element inside the class

I want to get an element a

inside a class and change it.

My HTML:

<div class="alignleft">
    <a href="http://cismdomain.com/articles/page/2/">« Older Entries</a>
</div>

I want to change Older Entries

to Previous

.

My JavaScript code:

var oldentries = document.querySelector('.alignleft');
var ainside = document.getElementsByTagName('a');
oldentries.ainside.innerHTML = "Previous";

but it gives me undefined

.

+3


source to share


5 answers


Once you use Document.querySelector () to get the elements with a class '.alignleft'

, you can also do oldentries.querySelector('a');

to get 'a'

inside oldentries

and then change the element.innerHTML :



var oldentries = document.querySelector('.alignleft'),
    ainside = oldentries.querySelector('a');

ainside.innerHTML = 'Previous';
      

        
        
        
      

    
<div class="alignleft">
  <a href="http://cismdomain.com/articles/page/2/">« Older Entries</a>
</div>
Run codeHide result


+2


source


You need to update the textContent

element property <a>

.

Working example:



var linkElement = document.querySelector('.alignleft a');
linkElement.textContent = 'Previous';
      

        
        
        
      

    
<div class="alignleft">
<a>Older Entries</a>
</div>
Run codeHide result


+1


source


document.getElementsByTagName

returns a collection of HTML. So you need to iterate over it (in your case, this will be the first entry).

var oldentries = document.querySelector('.alignleft');
var ainside = document.getElementsByTagName('a');
for(i=0;i<ainside.length;i++) {
    ainside[i].innerHTML = "Previous";
}
0


source


You can search for your element using a call to subscribe to the requestSelector using a more precise selector: use directly .alignLeft a

instead of doing it twice.

This code works:

var entries = document.querySelector('.alignLeft a');
entries.innerHTML = "Previous"
0


source


Your code will output something like

document.querySelector('.alignleft').document.getElementsByTagName('a').innerHTML = "Previous";

Also, getElementsByTagName('a')

Array will not map to an object that you can apply .innerHTML

to.

var ainside = document.querySelector('.alignlef a'); // Select first occurance of a inside the first occurance of .alignleft in the document

ainside.innerHTML = "Previous";
0


source






More articles:


All Articles