Adding image using javascript_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-02 01:25 出处：网络

I have a html page in which there is an image in anchor tag code is : <a href=\"www.google.com\" id=\"x\"><img src=\"images/test.png\" /></a>

相关专题：javascript

I have a html page in which there is an image in anchor tag code is :

<a href="www.google.com" id="x"><img src="images/test.png" /></a>

on body onload event i am calling a javascript function which dynamically changes the image . My code is:

<script type="text/javascript">
function changeImage()
{
  document.getElementById('x').innerHTML= '<img src="images/test2.png" />'; 
}
</script>

This is working fine in firefox but not working in g开发者_如何学Gooogle chrome and ie. Please help..

try this:

<a href="www.google.com" id="x"><img id="y" src="images/test.png" /></a>

in js

function changingImg(){
    document.getElementById("y").src="./images/test2.png"
}

Tested in Chrome and IE.

Then try this: [hoping that id of <a> is available and have at least one img tag]

var x = document.getElementById("x");
var imgs = x.getElementsByTagName("img");
imgs[0].src="./images/img02.jpg";

try following instead of changing innerHTML.

function changeImage()
{
  var parent = documeent.getElementById('x');
  parent.getElementsByTagName("img")[0].src = "newUrl";
}

As others have indicated, there are many ways to do this. The A element isn't an anchor, it's a link. And no one really uses XHTML on the web so get rid of the XML-style syntax.

If you don't have an id for the image, then consider:

function changeImage(id, src) {

  var image;
  var el = document.getElementById(id);

  if (el) {
    image = el.getElementsByTagName('img')[0];

    if (image) {
      image.src = src;
    }
  }
}

Then you can use an onload listener:

<body onload="changeImage('x', 'images/test.png');" ...>

or add a script element after the link (say just before the closing body tag) or use some other strategy for running the function after the image is in the document.