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

我正在使用一个看起来像下面代码的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>

您可以遍历 body 中的所有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>

在评论中，您说要插入第 1 张和第 3 张图像 [奇数索引图像] 元素Before并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>

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

这是一个 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)产生所需的输出它们是身体的直接子级，因此在执行函数一次后，第 3 和第 4 个 img 将成为第 1 和第 2 个，因此只需再次运行该函数即可为您特定示例解决问题。

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

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

我正在使用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>

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

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

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

如果你更喜欢一个纯粹的JavaScript答案（无论是为了学习，性能还是其他原因），那么看看Node.appendChild()和Node.insertBefore()（MDN链接）。

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

如何在不使用库的情况下在 JavaScript 中插入 After（）？
在 JavaScript 中元素之前插入 HTML，无需 jQuery [已关闭]

这是一个 JQuery 解决方案

相关内容

最新更新

热门标签：