How to select element, enclose it in a div and add a class to it, in pure javascript?

Question

Building a responsive site, the entries to the CMS are all all in markdown. So not practical to code the div into the document in all the new entries. So need to add classes dynamically.

I need to select an <img>within the post then wrap it with a div that has a certain class to style it. Otherwise the original width of the image throws off the layout.

image breaking layout

I found the solution by hardcoding into the post a div around the image

HTML

<div class="imgWrap">
  <img>
</div>

CSS

.imgWrap { 
  margin: 0 auto 18px;
  width: 100%; 
}

.imgWrap img { 
  max-width: 96%; 
}

But this needs to happen dynamically. I tried

<script>
  var x=document.getElementsByTagName('div.post img')[0];
  document.write("<div class="imgWrap">");
  document.write("<img>");
  document.write("</div>");
</script>

I had found this relJavascript - How to add div class to createElement And then I followed the links, including HTML DOM className Property which helped me start the script, but still confused as to the next step.

I am building this site in Ruby with Jekyll, in case there is a different way you suggest approaching this.

Replace `getElementsByTagName` with `querySelectorAll` or `querySelector` and drop the `[0]` subscript, — alex, Aug 16 '13 at 05:24
@mithunsatheesh - the OP specifically asked for pure javascript. — dc5, Aug 16 '13 at 05:32
@ChrisHerbert I have open ears if you have a suggestion. Are you saying that I am overcomplicating this by not just using inherited classes through CSS? or that I should avoid adding the div and just go directly to the . My attempts at both were not working, so I figured I would try this route. Currently the app is working, but open to suggestions that improve code, thanks. — JGallardo, Aug 16 '13 at 16:43
What happens when you apply the styles directly to the img tag? Wouldn't `max-width: 100%; height: auto;` work? — Chris Herbert, Aug 16 '13 at 17:21
@ChrisHerbert ... I just tried it in Firebug, it worked. Now wondering how I can make use of this new stuff I learned with the javascipt. Do you know when would be a more appropriate use case for javascript to add some of these concepts? — JGallardo, Aug 16 '13 at 17:30

kalley · Accepted Answer · 2013-08-16T13:34:37.177

4

var img = document.querySelector('div.post img');
var div = document.createElement('div');
div.className = 'imgWrap';
img.parentNode.insertBefore(div, img);
div.appendChild(img);

This should work for you. querySelector works all the way back to IE8.

FIDDLE

If there was the possibility for multiple <img> tags, you could use document.querySelectorAll and then loop through those and do the same manipulations:

var imgs = document.querySelectorAll('div.post img');
for ( var i = 0, l = imgs.length; i < l; ++i ) {
    var img = imgs[i];
    var div = document.createElement('div');
    div.className = 'imgWrap';
    img.parentNode.insertBefore(div, img);
    div.appendChild(img);
}

edited Aug 16 '13 at 13:34

answered Aug 16 '13 at 05:24

kalley

18,072
2
39
36

thank you. I did the querySelectorAll but it did not work. But just the querySelector did work on the first image. I am thinking that I have to write some type of loop? – JGallardo Aug 16 '13 at 06:06
1

Updated with how to use `querySelectorAll`. – kalley Aug 16 '13 at 13:34

score 1 · Answer 2 · answered Aug 16 '13 at 05:32

1

one way of doing it would be

var img = document.querySelector('div.post img');
var imgParent = img.parentNode;
var div = document.createElement('div');
div.className = 'imgWrap';
div.appendChild(img);
imgParent.appendChild(div);

answered Aug 16 '13 at 05:32

U.P

7,357
7
39
61

this definitely works but only on the first image in the post. – JGallardo Aug 16 '13 at 05:52

How to select element, enclose it in a div and add a class to it, in pure javascript?

2 Answers2