Asked  7 Months ago    Answers:  5   Viewed   29 times

I would like to move one DIV element inside another. For example, I want to move this (including all children):

<div id="source">

into this:

<div id="destination">

so that I have this:

<div id="destination">
  <div id="source">



Ever tried plain JavaScript... destination.appendChild(source); ?

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>


  <div id="destination">
  <div id="source">

Tuesday, June 1, 2021
answered 7 Months ago

canplaythrough is the event that should fire when enough data has downloaded to play without buffering.

From the Opera teams excellent (although maybe very slightly dated now) resource Everything you need to know about HTML5 video and audio

If the load is successful, whether using the src attribute or using source elements, then as data is being downloaded, progress events are fired. When enough data has been loaded to determine the video's dimensions and duration, a loadedmetadata event is fired. When enough data has been loaded to render a frame, the loadeddata event is fired. When enugh data has been loaded to be able to play a little bit of the video, a canplay event is fired. When the browser determines that it can play through the whole video without stopping for downloading more data, a canplaythrough event is fired; this is also when the video starts playing if it has a autoplay attribute.

'canplaythrough' support matrix available here:

You can get around the support limitations by binding the load element to the same function, as it will trigger on those.

Wednesday, July 28, 2021
answered 5 Months ago

You can use insertAfter to move the element. Docs

$('.price').each(function() {

Here you have the updated fiddle.

Monday, August 2, 2021
answered 5 Months ago

Here's one way using getImageData to manipulate the hue of each image pixel:

  • Use getImageData to fetch the RGBA color data of each pixel

  • Convert the RGBA color to HSL color. The H in HSL means Hue which is what we normally think of as "color".

  • If the Hue of an original pixel is red-ish (Hue<30 or Hue>300) then shift the hue by the amount specified in your range control. If you want to shift from red to blue, then your slider should shift the color (Hue) from 0 to -.33.

Note: getImageData requires that the image originate on the same domain as the webpage or else you will get a cross-domain security error.

Here's example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var imgData,data,originalData;

$myslider.on('input change',function(){
  var value=parseInt($(this).val());

var img=new Image();
function start(){



function HueShift(hue1,hue2,shift){

  for(var i=0;i<data.length;i+=4){

    // skip transparent/semiTransparent pixels

    var hsl=rgbToHsl(red,green,blue);
    var hue=hsl.h*360;

    // change redish pixels to the new color
    if(hue<30 || hue>300){

      var newRgb=hslToRgb(hsl.h+shift,hsl.s,hsl.l);

// Helper functions

function rgbToHsl(r, g, b){
  r /= 255, g /= 255, b /= 255;
  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;
  if(max == min){
    h = s = 0; // achromatic
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    h /= 6;
  return({ h:h, s:s, l:l });

function hslToRgb(h, s, l){
  var r, g, b;
  if(s == 0){
    r = g = b = l; // achromatic
    function hue2rgb(p, q, t){
      if(t < 0) t += 1;
      if(t > 1) t -= 1;
      if(t < 1/6) return p + (q - p) * 6 * t;
      if(t < 1/2) return q;
      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
    r:Math.round(r * 255),
    g:Math.round(g * 255),
    b:Math.round(b * 255),
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src=""></script>
<h4>Change the slider to change the car color</h4>
<input id=myslider type=range min=0 max=100 value=0><br>
<canvas id="canvas" width=300 height=300></canvas>
Tuesday, October 5, 2021
answered 2 Months ago

To swap the first and last div.clearfixs, given that HTML, use the querySelector, insertBefore, and appendChild functions.

Here is a complete Greasemonkey script that does that:

// ==UserScript==
// @name     _Swap first and last div.clearfix
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    none
// ==/UserScript==

var container    = document.querySelector ("fieldset");
var firstTargDiv = container.querySelector ("fieldset > div.clearfix:first-child");
var lastTargDiv  = container.querySelector ("fieldset > div.clearfix:last-child");

//-- Swap last to first.
container.insertBefore (lastTargDiv, firstTargDiv);

//-- Move old first to last.
container.appendChild (firstTargDiv);
Thursday, November 18, 2021
answered 3 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :