0
217
ViewsCambie programáticamente el src de un img y agregue el elemento li en la lista usando javascript
Cómo cambiar home img src , href y texto de anclaje y en la lista de HTML y cómo agregar un elemento en la lista usando 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>quiero que me guste esto
·
Juan Pablo Isaza
2 answers
Answer question0
el document.getElementsByClassName('home') no es una lista porque solo tiene un elemento con ese nombre de clase
para que funcione tienes que seleccionar los elementos correctos:
document.querySelector('.home img').src = 'imagelink.png'; document.querySelector('.home a').href = 'http://www.cnn.com/'; document.querySelector('.home a').innerHTML = 'Main';Para agregar un elemento a la lista:
const node = document.createElement('li'); node.appendChild(document.createTextNode('core vocabulary')); document.querySelector('.m_menu_ul').appendChild(node);
·
Juan Pablo Isaza
Report
0
El problema es que cambia el elemento con la clase home que es un <li> . Use el selector de consultas y seleccione los elementos secundarios correctos ( img y 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
Report
Answer question