0

I would like to wrap the image element inside a div element in Polymer 1.0:

<template>
      <img src="" alt="Image preview..." id="avatar" class="avatar">
    </template>

<script>
  var $container = document.createElement('div');
  $container.className += " " + 'resize-container';

  var image_target = this.$.avatar;
  var image_target_parent = image_target.parentNode;

  Polymer.dom(image_target_parent).insertBefore($container, image_target);
</script>

I don't know how to wrap the this.$.avatar inside $container.

I'm looking for a jQuery like solution as follows:

image_target.wrap('<div class="resize-container"></div>');
double-beep
  • 5,031
  • 17
  • 33
  • 41
Thiru
  • 96
  • 8

1 Answers1

0

As explained here, you should use:

Polymer.dom($container).appendChild(this.$.avatar);

Also your 2nd line, it should be:

$container.className = 'resize-container'

Otherwise you are setting the class to .resize-container which isn't right since you do not use periods in class names.

double-beep
  • 5,031
  • 17
  • 33
  • 41
ktiedt
  • 436
  • 2
  • 4
  • @ktiedit The period in the className was a typo. Corrected it. Thanks
    The image is loaded first. Once its loaded I'm trying to put a container around it for handling crop/resize of the image. The idea is simple i should wrap the elementA inside elementB. where elementB is not in the DOM on page load. I don't want to append/prepend to the elementA.     – Thiru Sep 04 '15 at 08:46
  • Correct me if I am wrong, but does what I suggested originally not do exactly that? I am putting your img (this.$.avatar) into the div you created, that is not in the DOM on page load since it was programmatically created by you... ie: after your code + my modifications you should see the equivalent of: `` – ktiedt Sep 04 '15 at 09:07