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

Question

我使用的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>

Answer 1

您可以循环遍历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>

Answer 2

在评论，你说，你要插入Before第一和第三图像[奇数索引图像]元素，并After第二和第四图像[即使索引图像。 这是一个可能的解决方案

 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>

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)

这将产生第一个和第二个img .eq(0) & .eq(1)的所需输出，它们是身体的直接子项，因此在执行该函数后，一旦第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中进行了注释。

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 Links）。

另见这些相关的SO问题：

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

问题描述

8 个解决方案

解决方案1
2 已采纳 2017-01-29 07:41:26

解决方案2
1 2017-01-29 08:31:57

解决方案3
1 2017-01-29 09:12:11

解决方案4
1 2017-01-29 09:47:08

这是一个JQuery解决方案

解决方案5
1 2017-01-29 13:17:03

解决方案6
0 2017-01-29 07:43:11

解决方案7
0 2017-01-29 07:51:49

解决方案8
0 2017-01-29 07:59:01

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

问题描述

8 个解决方案

解决方案1 2 已采纳 2017-01-29 07:41:26

解决方案2 1 2017-01-29 08:31:57

解决方案3 1 2017-01-29 09:12:11

解决方案4 1 2017-01-29 09:47:08

这是一个JQuery解决方案

解决方案5 1 2017-01-29 13:17:03

解决方案6 0 2017-01-29 07:43:11

解决方案7 0 2017-01-29 07:51:49

解决方案8 0 2017-01-29 07:59:01

解决方案1
2 已采纳 2017-01-29 07:41:26

解决方案2
1 2017-01-29 08:31:57

解决方案3
1 2017-01-29 09:12:11

解决方案4
1 2017-01-29 09:47:08

解决方案5
1 2017-01-29 13:17:03

解决方案6
0 2017-01-29 07:43:11

解决方案7
0 2017-01-29 07:51:49

解决方案8
0 2017-01-29 07:59:01