How to add pictures in javascript

In web development, dynamically loading images is a very common requirement. JavaScript, as a scripting language, can be used to achieve this goal. This article will introduce how JavaScript implements image loading.

1. Use document.createElement() method

Use document.createElement() method to create a new HTML element in the page. Of course, there are also graphic elements included. The specific steps are as follows:

1) Use the document.createElement() method in JavaScript to create an tag.

For example, we can use the following code to create a new image element:

var img = document.createElement('img');

2) Assign the URL of the image to the element by setting the "src" attribute of the element.

For example, we can use the following code to specify the image path for the new image element:

img.src = "example.jpg";

3) Add the element to the page.

For example, we can use the following code to add this element to a specific HTML element of the web page:

document.getElementById("image_container").appendChild(img);

Where image_container represents the ID of the HTML element that holds the image. Through this step, the new image element is successfully added to the web page.

2. Using jQuery

In addition to using JavaScript native methods, we can also use the jQuery tool library to complete the task of loading images.

1) Get the DOM element where the image needs to be placed.

In jQuery, we can use the $() function to get the specified HTML element. In the following code, we get an HTML element with the ID image_container and assign it to a new variable imageContainer.

var imageContainer = $('#image_container');

2) Create a new element and set its attributes.

In jQuery, you can use the $(html) function to convert HTML tag strings into jQuery elements. Therefore, we can create a new image element as follows:

var img = $('<img>');

You can set arbitrary properties for this element using the prop() method. For example, we can use the following code to set the src attribute to the image path:

img.prop('src', 'example.jpg');

3) Add a new element to the DOM.

Same as JavaScript, we can use jQuery's append() method to add new elements to the container element:

imageContainer.append(img);

At this point, the image has been successfully dynamically loaded into the web page.

Summary:

This article introduces two methods of dynamically loading images through JavaScript. When using the document.createElement() method, we need to create new image elements, set attributes, and then add them to the web page. Using jQuery can accomplish this task more concisely and clearly.

The above is the detailed content of How to add pictures in javascript. For more information, please follow other related articles on the PHP Chinese website!