Add image to list item

JavaScript
1

How can I add an image to a dynamic list element?

I used:

<script>
document.getElementById("menu-item-100").innerHTML = "MyWordGoesHere";
</script>

But I would like to add an image after MyWordGoesHere + imageHere.

I would like it to show only when the browser is below 1028pixels. Anyone know how to do something like that with javascript?

Thanks,

2

Perhaps…

<script>
var hwidth;
hwidth=document.querySelector("html").offsetWidth;
document.getElementById("menu-item-100").innerHTML = "MyWordGoesHere";
if(hwidth<1028)
  document.getElementById("menu-item-100").innerHTML+="image here";
</script>
3

Hi Ryan that works, but for some reason I thought that only the inner html gets replaced, however the link (href) disappears. Is there any way to call it back in - its dynamic. I guess I could just add the link, but would rather keep the dynamic aspect.

Thanks

4

Can you give us a working demo on codepen? Just so we have something to go off of?

5

here is the site:
http : // fashion . works/

The work dresses was replaced, but with a non linked version. If I remove the javascript then the link will show up. Any ideas?

6

You can link here. Sitepoint forums will automatically use no-follow on your links.

You’re already including jQuery, so why not use it?

Here is basically @RyanReese’s code using jQuery and using .append():

<script>
var hwidth = jQuery('html').width();

jQuery('#menu-item-100').html('MyWordGoesHere');

if(hwidth < 1028) {
  jQuery('#menu-item-100').append('image here');
}
</script>

(also, your responsiveSlider.min.js library needs to come after your jQuery include… I don’t know how to do this on WordPress or how you have this set up, but it’s broken and throwing errors)

7

thanks for the code @RyanReese and thanks for the append @mawburn. So I ended up using:

<script>
var hwidth = jQuery('html').width();
if(hwidth < 1028) {
jQuery('#menu-item-100').append('image here');
}
</script>

However the image is not linked like the word? And if I start at a 300px with and expand the window to the desktop size of 1028px the image is still there?

Any ideas on how to fix those two problems?

Thanks on the order for responsiveSlider.min.js

8

You need to bind that to the windows resize event. It won’t automatically re-run the function during resize :slight_smile: .

You’d need a secondary else statement there basically saying if its >== 1028, then remove the appended image.

9

ok maybe I was thinking CSS haha. Thanks