javascript生成img标签的3种实现方法(对象、方法、html)

以下是详细讲解“javascript生成img标签的3种实现方法(对象、方法、html)”的完整攻略。

方法一：使用JavaScript对象

var img = new Image();
img.src = 'http://example.com/example.jpg';
document.body.appendChild(img);

上面代码首先创建一个Image对象，然后设置该对象的src属性，最后将这个对象添加到文档体中。

方法二：使用JavaScript函数

function createImage(src) {
  var img = document.createElement('img');
  img.src = src;
  return img;
}

var img = createImage('http://example.com/example.jpg');
document.body.appendChild(img);

这段代码定义了一个createImage()函数，该函数接受一个src参数，并返回一个新的img元素。这个函数的内部实现使用了DOM API，通过document.createElement()创建一个新的img元素，然后设置img元素的src属性，最后返回这个新创建的img元素。我们可以在调用createImage()函数时，传入要使用的图片的URL，然后将返回的img元素添加到文档体中。

方法三：直接使用HTML代码

var markup = '<img src="http://example.com/example.jpg">';
document.body.insertAdjacentHTML('beforeend', markup);

这段代码创建了一个字符串变量markup，并将其中的HTML代码设置为一个img元素，该元素的src属性指向指定的图片URL。然后使用DOM API的insertAdjacentHTML()函数，将这段HTML代码插入到文档体中。注意这里的第一个参数是beforeend，表示插入在文档体中的最后一个位置。

这三种方法实现的效果相同，但实现的方式不同。使用JavaScript对象或函数，你可以更灵活地控制图片元素的创建和添加。如果你有一段已经存在的HTML代码，那么你可以使用insertAdjacentHTML()函数直接将这段代码添加到文档中。

希望这份攻略能够帮到你。