Home > Article > Web Front-end > Can jquery add a tag to img?

Can jquery add a tag to img?

青灯夜游Original: 2022-12-16 16:42:202344browse

Can be added; in jquery, you can use the wrap() function to add the parent tag a to the img element. Adding method: 1. Use the jquery selector to select the img element object, the syntax "$("img")"; 2. Use the wrap() function to add a specified parent element to the obtained element object, the syntax "img element object.wrap( "")".

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

jquery can add a tag to img

To add a tag to img is to add an a tag outside the img tag:

<a href="">
<img  id="img" src="img/2.jpg"    style="max-width:90%"/ alt="Can jquery add a tag to img?" >
</a>

In simple terms , which is to add a parent element (a tag) to the img tag.

In jquery, you can use the wrap() function to add a parent tag to a specified element.

The wrap() method wraps each selected element with the specified HTML element.

Implementation example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("img").wrap("<a href=&#39;#&#39;></a>");
				});
			});
		</script>
		<style type="text/css">
			a {
				background-color: yellow;
			}
		</style>
	</head>
	<body>

		<img  src="img/1.jpg"    style="max-width:90%"/ alt="Can jquery add a tag to img?" > 
		<img  src="img/2.jpg"    style="max-width:90%"/ alt="Can jquery add a tag to img?" ><br><br>
		<button>给每个img元素包裹一个a元素</button>

	</body>
</html>

Can jquery add a tag to img?

wrap() method description

wrap() method usage Wrap each selected element with the specified HTML element, that is, add a parent element outside the selected element.

This kind of wrapping is most useful for inserting additional structured markup into the document without destroying the semantic quality of the original document. The principle of this function is to examine the first element provided (which is dynamically generated from the provided HTML markup code) and find the top-level ancestor element in its code structure - this ancestor element is the wrapping element. This function cannot be used when the element in the HTML markup code contains text. Therefore, if you want to add text, you should add it after the package is completed.

Grammar:

$(selector).wrap(html|ele|fn)

Can jquery add a tag to img?

Parameter description:

html Parameter description: Use a new Wrap the created div

$("p").wrap("<div class=&#39;wrap&#39;></div>");

elem parameter description: Wrap each paragraph with a div with the ID "content"

$("p").wrap(document.getElementById(&#39;content&#39;));

Callback function description: Use the content of the original div as the class of the new div, and wrap each element

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$(&#39;.inner&#39;).wrap(function() {
  return &#39;<div class="&#39; + $(this).text() + &#39;" />&#39;;
});

Result:

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

【Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of Can jquery add a tag to img?. For more information, please follow other related articles on the PHP Chinese website!

jquery html 回调函数 class 对象 href 选择器

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Can jquery get the src attribute of an image?Next article：Can jquery get the src attribute of an image?

See more

Can jquery add a tag to img?

Related articles