如何在第一个 img 标签之前和第二个 img 标签之后添加 html 代码答案

【问题标题】：how can I add html code before the 1st img tag and after 2 img tag如何在第一个 img 标签之前和第二个 img 标签之后添加 html 代码
【发布时间】：2017-06-14 14:12:49
【问题描述】：

我正在使用类似于下面代码的 html。我正在使用 javascript 代码在第一个 img 标记之前替换或添加代码，并在第二个 img 标记之后添加代码。我该怎么做？

<body>
    <p>test</p>
    <img src="test.png" />
    <img src="test2.png" />
    <p>test</p>
    <img src="test3.png" />
    <img src="test4.png" />
    <p>test></p>
</body>

js:

    var Children  = document.getElementsByClassName('img-responsive');
    for (i = 0; i <Children.length; i++) {
        alert(Children[i].innerHTML);
        Children[i].innerHTML = Children[i].id;
        if(i==1 && i==3) {
            string = string.split('<img').join(' <div class="row"> <div class="col-md-2"><img class="img-responsive" ');    
        }

        if(i==0 && i==2) {
            string=string.split('<img').join(' <div class="row"> <div class="col-md-2"><img class="img-responsive" ');
        }
    }

期望的输出：

<body>
    <p>test</p>
<div class=“row”>
<div class=“col-md-6”>
    <img class=“img-responsive" src="test.png" />
    <img src="test2.png" />
</div>
</div>
    <p>test</p>
    <div class=“row”>
 <div class=“col-md-6”>
    <img class=“img-responsive" src="test3.png" />
    <img class=“img-responsive" src="test4.png" />
</div>
</div>
    <p>test></p>
</body>

【问题讨论】：

嗨，比利。我已经尝试过这样做，但我无法正确使用方法。事实上，即使是现在我也无法让它发挥作用。我正在学习如何让它发挥作用。
相关，可能被骗：stackoverflow.com/questions/2751127/…
我不想改变css（我不想改变样式）。我想在代码前后添加更多的html代码。
你的问题的问题是你解释错了。您不需要在第一个和第二个之后插入，看起来您想将两个图像 wrap 到另一个容器中。对吗？
转换后发布所需的 HTML 结构。

标签： javascript jquery html

【解决方案1】：

您可以遍历正文中的所有img 标签并使用wrapAll() 方法，如下所示。

var imgs = $('body > img');

for (var i = 0; i < imgs.length; i += 2) {
    var add = imgs.eq(i).add(imgs.eq(i + 1));
    add.wrapAll('<div class="row"><div class="col-md-6"></div></div>');
}

.col-md-6 {
    background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <p>test</p>
    <img src="test.png" />
    <img src="test2.png" />
    <p>test</p>
    <img src="test3.png" />
    <img src="test4.png" />
    <p>test</p>
</body>

【讨论】：

我已经更新了问题并添加了 2 个 img 标签。我想在第一个和第三个 img 标签之前以及第二个和第四个 img 标签之后添加 html 代码。
我已经用更简单的代码替换了 jQuery 代码。 @杰森

【解决方案2】：

我正在使用 javascript 代码：

在第一个 img 标签和之前替换或添加代码
在第二个 img 标签之后添加代码。

使用完成的目标：

.insertAdjacentHTML()
.nextElementSibling
.firstChild
Array.prototype.map.call()
.appendChild()

细节在片段中注释。

片段

// Reference and collect all <img> in a NodeList
var imgs = document.querySelectorAll('img');

/* This utilizes the .map() Array and .call() methods...
|| ...It also converts the NodeList into a true array.
*/
var imgArray = Array.prototype.map.call(imgs, function(obj, idx) {
  // Assign each <img> the .img-responsive class
  obj.className = "img-responsive";

  // If the current index of <img> is an odd number...
  if (idx % 2 === 1) {

    /* .insertAdjacentHTML() is a method much like...           || .innerHTML but better.
     */
    obj.insertAdjacentHTML('afterend', '<div class="row"><div class="col-md-6"></div></div>');

    // Reference the second image's sibling (.row)
    var row = obj.nextElementSibling;

    // Reference .row's child element.
    var bs = row.firstChild;

    // Assign a var to the first image of the pair.
    var imgA = imgs[idx - 1];

    // Assign a var to the last image of the pair.
    var imgB = imgs[idx];

    // Append images to .col-md-6
    bs.appendChild(imgA);
    bs.appendChild(imgB);
  }

  return imgArray;
});

html,
body {
  font: 400 16px/1.428 Verdana;
}
.row {
  background: rgba(0, 0, 0, .3);
}
.col-md-6 {
  border: 2px solid brown;
}
img {
  outline: 1px solid #eee;
}
p {
  font-size: 3.5rem;
}

<p>test</p>
<img src='http://placehold.it/150x150/e0f/eee?text=1'>
<img src='http://placehold.it/150x150/e0f/eee?text=2'>
<p>test</p>
<img src='http://placehold.it/150x150/000/eee?text=3'>
<img src='http://placehold.it/150x150/000/eee?text=4'>
<p>test</p>
<p>test</p>
<img src='http://placehold.it/150x150/00f/eee?text=5'>
<img src='http://placehold.it/150x150/00f/eee?text=6'>
<p>test</p>
<img src='http://placehold.it/150x150/f00/eee?text=7'>
<img src='http://placehold.it/150x150/f00/eee?text=8'>
<p>test</p>
<p>test</p>
<img src='http://placehold.it/150x150/080/eee?text=9'>
<img src='http://placehold.it/150x150/080/eee?text=10'>
<p>test</p>
<img src='http://placehold.it/150x150/fc0/111?text=11'>
<img src='http://placehold.it/150x150/fc0/111?text=12'>
<p>test</p>

【讨论】：

【解决方案3】：

这是一个 JQuery 解决方案

before = '<div class=“row”><div class=“col-md-6”>'
$imgOne = $('<div>').append($('body > img').eq(0).clone().addClass("img-responsive")).html();
$imgTwo = $('<div>').append($('body > img').eq(1).clone().addClass("img-responsive")).html();
after = '</div></div>'
$('body > img').eq(1).remove()
$('body > img').eq(0).replaceWith(before + $imgOne + $imgTwo + after)

这将为第一个和第二个 img .eq(0) & .eq(1) 产生所需的输出它们是 body 的直接子代，因此在执行该函数后，第 3 和第 4 个 img 将成为第 1 个和第 2 个，因此只需再次运行该函数即可为您的具体示例解决问题。

因此请注意您的选择器以及您的更改如何影响 img 元素的索引。

在这种情况下，我们将前 2 个 imgs 包装在一个 div 中，这会将第 3 个和第 4 个图像向上移动

【讨论】：

【解决方案4】：

正如我从您的问题中看到的那样，您正在尝试使用纯 JS（好主意）来做到这一点。我建议做这样的事情：

const imgs = document.querySelectorAll('img')

for (let i = 0; i < imgs.length; i = i + 2) {
  imgs[i].insertAdjacentHTML('beforebegin', `
    <div class="row">
      <div class="col-md-6"></div>
    </div>
  `)

  const container = imgs[i].previousElementSibling.querySelector('.col-md-6')
  container.appendChild(imgs[i])
  container.appendChild(imgs[i + 1])
}

【讨论】：

【解决方案5】：

在评论中，您声明要插入 Before 第 1 和第 3 张图像 [奇数索引图像] 元素和 After 第 2 和第 4 图像 [偶数索引图像]。这是一个可能的解决方案

var images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
  var _image = images[i];
  if (i % 2 === 0)
    images[i].outerHTML = '<div class="row"><div class="col-md-6">' + images[i].outerHTML;
  else
    images[i].outerHTML += '</div></div>';
}

<body>
  <p>test</p>
  <img src="https://images.pexels.com/photos/285173/pexels-photo-285173.jpeg?h=350&auto=compress&cs=tinysrgb" alt="image 1" />
  <img src="https://images.pexels.com/photos/287229/pexels-photo-287229.jpeg?h=350&auto=compress&cs=tinysrgb" alt="image 2" />
  <p>test</p>
  <img src="https://images.pexels.com/photos/296878/pexels-photo-296878.jpeg?h=350&auto=compress&cs=tinysrgb" alt="image 3" />
  <img src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?h=350&auto=compress&cs=tinysrgb" alt="image 4" />
  <p>test</p>
</body>

【讨论】：

当然不行。你不能像这样构造innerHTML。
@dfsq。你能解释一下你的观点吗？我在构建解决方案时可能是错误的
我的意思是你的解决方案行不通，甚至在理论上也行不通。您不能拆分标签并分配给 innerHTML。每个分配都会重建 DOM 树，并且它的关闭标记丢失浏览器会在分配 '</div></div>'; 之前尝试修复它的关闭节点。

【解决方案6】：

如果您更喜欢纯 JavaScript 答案（无论是出于学习、性能下降还是其他原因），请查看 Node.appendChild() 和 Node.insertBefore()（MDN 链接）。

另请参阅这些相关的 SO 问题：

【讨论】：

【解决方案7】：

如果你有两个以上的图像，并且你想在第二个元素之后专门做

$('img').first().before('Your html content here');
$('img:eq(1)').after('Your html content here');

【讨论】：

【解决方案8】：

在 HTML 中

<body>
<p>test</p>
<img id="img1" src="test.png" style="">
<img id="img2" src="test2.png">
<p>test></p>
</body>

在 JQuery 中

$('#img1').before('content here');
$('#img2').after('content here');

【讨论】：