Question

我使用的html看起来像下面的代码。我在第一个img标记之前使用javascript代码替换或添加代码，并在第二个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>

Answer 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>

Answer 2

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

＆＃13;

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>';
}

＆＃13;

<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>

＆＃13;

Answer 3

正如我从你的问题中看到的那样，你正试图用纯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])
}

Answer 4

这是一个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)

这将为1st和2nd img .eq(0) & .eq(1)生成所需的输出这是 body 的直接子项，所以在执行该函数后，一旦第3和第4个img将成为第1个和第2个，所以简单地再次运行该函数将为您执行特定示例的技巧。

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

在这种情况下，我们将div中的前2个imgs包起来，这将使第3和第4个向上移动

Answer 5

我正在使用javascript代码：

在第一个img标记和
在第二个img标签后添加代码。

使用以下完成的目标：

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

详细信息在Snippet中进行了评论。

<强>段

// 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>

Answer 6

在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');

Answer 7

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

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

Answer 8

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

另见这些相关的SO问题：

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

8 个答案:

这是一个JQuery解决方案