3

I am using an html which looks like the code below. I am using a javascript code to replace or add code before the 1st img tag and add code after the 2nd img tag. How can I do it?

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

Desired output :

<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>
jason
  • 3,932
  • 11
  • 52
  • 123
  • 1
    Hi Billy. I've tried doing it but I was unable to get the approach right. In fact, even now I'm unable to make it work. I'm kind of learning how to make it work . – jason Jan 29 '17 at 07:55
  • Relevant, possible dupe: http://stackoverflow.com/questions/2751127/how-to-select-the-first-second-or-third-element-with-a-given-class-name – But those new buttons though.. Jan 29 '17 at 07:56
  • I don't want to change css(I don't want to change styling). I want to add more html code before and after the code. – jason Jan 29 '17 at 07:57
  • The problem of your question is that you explained it wrong. You don't need to insert before first and after second, looks like you want to *wrap* two images into another container. Correct? – dfsq Jan 29 '17 at 08:12
  • Post desired HTML structure after transformation. – dfsq Jan 29 '17 at 08:13
  • `.row` should be placed inside `.container`, which you don't have. – dfsq Jan 29 '17 at 08:20

8 Answers8

1

You can loop through all img tags in body and use wrapAll() method like following.

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>
Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
1

In a comment, you stated that you want to insert Before 1st and 3rd image [Odd indexed images] element and After 2nd and 4th image [Even indexed images]. Here is a possible solution

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>
Farooq Ahmed Khan
  • 3,975
  • 3
  • 27
  • 36
  • Of course it will not work. You can't construct innerHTML like this. – dfsq Jan 29 '17 at 08:35
  • @dfsq. Can you explain your point. I might be wrong in constructing the solution – Farooq Ahmed Khan Jan 29 '17 at 08:42
  • 1
    My point is that your solution doesn't work and couldn't work even theoretically. You can't split tags and assign to innerHTML. Each assignment rebuilds DOM tree, and it closing tag is missing browser will try to fix it closing node before you assign `'';`. – dfsq Jan 29 '17 at 08:50
1

As I see from your question, you are trying to do it with pure JS (good idea). I would suggest doing something like this:

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])
}
dfsq
  • 191,768
  • 25
  • 236
  • 258
1

Here's a JQuery Solution

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)

this will produce the desired output for the 1st and 2nds img .eq(0) & .eq(1) that are direct children of body so after executing the function once the 3rd and 4th img will become the 1st and 2nd so simply running the function again will do the trick for you specific example.

so be mindful of your selector and how your changes affect the index if img elements.

in this case we are wraping the first 2 imgs in a div and this will shift the 3rd and 4th up

Community
  • 1
  • 1
Maher Fattouh
  • 1,742
  • 16
  • 24
1

I am using a javascript code to:

  • replace or add code before the 1st img tag and
  • add code after the 2nd img tag.

Accomplished objective using:

Details are commented in 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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

In HTML 

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

In JQuery

$('#img1').before('content here');
$('#img2').after('content here');
xaxist
  • 598
  • 5
  • 9
0

If you have more than two images and you want to do specifically after the second element

$('img').first().before('Your html content here');
$('img:eq(1)').after('Your html content here');
Chandan Rai
  • 9,879
  • 2
  • 20
  • 28
0

If you prefer a pure JavaScript answer (whether for learning, a drip of performance or some other reason), then have a look at Node.appendChild() and Node.insertBefore() (MDN Links).

See also these related SO questions:

Community
  • 1
  • 1
Jason Cemra
  • 563
  • 5
  • 15