Search code examples
htmlmovemoovwebtritium

Using tritium to move html elements

I'm using the Moovweb SDK to make a mobile version of a website and I need to move an image from one div to another. How can I do this using tritium?

<body>
  <div class="kittens">
    <img src="images/husky.jpg" id="husky">
  </div>

  ...

  <div class="puppies">
    [need to move img here]
  </div>
</body>
Solution

  • There are a few ways to do this.

    The way I find most appealing is to use some XPath axes and the move_here command:

    $("./body/div[contains(@class,'puppies')]") {
  move_here("ancestor::body/div[contains(@class,'kittens')]/img[@id='huskey']")
}

    This way gets the same effect using fewer characters (but is slower): 

    $("//div[contains(@class,'puppies')]") {
  move_here("//img[@id='huskey']")
}

    The reason I like doing it the first way is that, generally, the img you're looking for will not be so close to the body. Instead of doing the ancestor::body you could do //img[@id=''huskey] but this will likely be much slower. The other benefit to using ancestor is that it shows the connection between the two elements.