Question

这是我的案子

<p>
  <img src="myimage.jpg">
</p>

我想在

之前和之后添加标签

最终结果：

<p>
  <div>
    <img src="myimage.jpg">
  </div>
</p>

这种情况由cms自定义，我需要处理图片大小

Answer 1

您可以使用.wrap()

将HTML结构环绕在匹配的元素。

  tasks:
    - include_tasks: create_users.yml
      loop:
        - amit
        - ankit

$('p > img').wrap('<div class="img_wrapper"></div>');

.img_wrapper{
  background : red;
  overflow: hidden;
  padding : 5px;
  width : 200px;
  height : 200px;
}
.img_wrapper > img{
  width : 100%;
  height : 100%;
}

Answer 2

您可以按以下方式使用.append()和.appendTo()方法：

$('<div/>').append($('img')).appendTo('p');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <img src="myimage.jpg">
</p>

在标签<img>之前和之后插入标签<div>

2 个答案: