0
212
VistasProgrammatically change the src of an img and adding li item in list using javascript
How to change home img src, href and anchor text and in list of HTML and how to Add item in list using javaScript
javascript: (function() {
document.getElementsByClassName('home')[0].src = 'imagelink.png';
})();
javascript: (function() {
document.getElementsByClassName('home')[0].href = 'http://www.cnn.com/';
})();
javascript: (function() {
document.getElementsByClassName('home')[0].innerHTML = 'Main';
})();<ul class="m_menu_ul box_sizing">
<li class="home">
<img src="ld_menu_icon_qa_teal.png">
<a href="homepage.html">Home</a>
</li>
<! -- adding this item as well -->
<li class="qa">
<img src="ld_menu_icon_qa_teal.png">
<a href="quiz.html">Ask the Editor</a>
</li>
</ul>I want to like this
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
the document.getElementsByClassName('home') is not a list because you have just a single element with that class name
to make it work you have to select the correct elements:
document.querySelector('.home img').src = 'imagelink.png';
document.querySelector('.home a').href = 'http://www.cnn.com/';
document.querySelector('.home a').innerHTML = 'Main';
To add an item to the list :
const node = document.createElement('li');
node.appendChild(document.createTextNode('core vocabulary'));
document.querySelector('.m_menu_ul').appendChild(node);
·
Juan Pablo Isaza
Denunciar
0
The issue is, that you change the element with the class home which is a <li>. Use query selector and select the correct child elements (img and a):
javascript: (function() {
document.querySelector('.home img').src = 'imagelink.png';
})();
javascript: (function() {
document.querySelector('.home a').href = 'http://www.cnn.com/';
})();
javascript: (function() {
document.querySelector('.home a').innerHTML = 'Main';
})();<ul class="m_menu_ul box_sizing">
<li class="home">
<img src="ld_menu_icon_qa_teal.png">
<a href="homepage.html">Home</a>
</li>
<li class="qa">
<img src="ld_menu_icon_qa_teal.png">
<a href="quiz.html">Ask the Editor</a>
</li>
</ul>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta