javascript - How to show a canvas scene inside a specific div? -

i show scene inside existing div on page. canvas gets appended @ top. have tried using getelementbyid did not work me.

what missing here? thank in advance!

<div id="preview"></div>  <script>      if ( ! detector.webgl ) detector.addgetwebglmessage();      var screen_width = window.innerwidth;     var screen_height = window.innerheight;     var floor = -250;      var container;      var camera, scene, controls;     var renderer;      var mesh;      var texturecube;     var cameracube, scenecube;      var loader;      var mousex = 0, mousey = 0;      var windowhalfx = window.innerwidth / 2;     var windowhalfy = window.innerheight / 2;      init();     animate();      function init() {       container = document.createelement( 'div' );       document.body.appendchild( container );        // camera        camera = new three.perspectivecamera( 25, screen_width / screen_height, 1, 10000 );       camera.position.set( 185, 40, 170 );        controls = new three.orbitcontrols( camera );       controls.maxpolarangle = math.pi / 2;       controls.mindistance = 200;       controls.maxdistance = 500;        // scene        scene = new three.scene();        // skybox        scenecube = new three.scene();       cameracube = new three.perspectivecamera( 25, screen_width / screen_height, 1, 10000 );       scenecube.add( cameracube );        var r = "textures/cube/pisa/";       var urls = [ r + "px.png", r + "nx.png",              r + "py.png", r + "ny.png",              r + "pz.png", r + "nz.png" ];         texturecube = three.imageutils.loadtexturecube( urls );        var shader = three.shaderlib[ "cube" ];       shader.uniforms[ "tcube" ].value = texturecube;        var material = new three.shadermaterial( {          fragmentshader: shader.fragmentshader,         vertexshader: shader.vertexshader,         uniforms: shader.uniforms,         depthwrite: false,         side: three.backside        } ),        mesh = new three.mesh( new three.boxgeometry( 100, 100, 100 ), material );       scenecube.add( mesh );        // lights        var light = new three.pointlight( 0xffffff, 1 );       light.position.set( 2, 5, 1 );       light.position.multiplyscalar( 30 );       scene.add( light );        var light = new three.pointlight( 0xffffff, 0.75 );       light.position.set( -12, 4.6, 2.4 );       light.position.multiplyscalar( 30 );       scene.add( light );        scene.add( new three.ambientlight( 0x050505 ) );        // renderer        renderer = new three.webglrenderer( { antialias: true } );       renderer.setpixelratio( window.devicepixelratio );       renderer.setsize( screen_width, screen_height );       renderer.domelement.style.position = "relative";        renderer.autoclear = false;        container.appendchild( renderer.domelement );        //        renderer.gammainput = true;       renderer.gammaoutput = true;         // events        window.addeventlistener( 'resize', onwindowresize, false );       window.addeventlistener( 'mousemove', ondocumentmousemove, false );        // loader        var start = date.now();        // new way via ctmloader , separate parts        loaderctm = new three.ctmloader( true );       document.body.appendchild( loaderctm.statusdomelement );        var position = new three.vector3( -105, -78, -40 );       var scale = new three.vector3( 30, 30, 30 );        loaderctm.loadparts( "models/ctm/camaro/camaro.js", function( geometries, materials ) {          hackmaterials( materials );          ( var = 0; < geometries.length; ++ ) {            var mesh = new three.mesh( geometries[ ], materials[ ] );           mesh.position.copy( position );           mesh.scale.copy( scale );           scene.add( mesh );          }          loaderctm.statusdomelement.style.display = "none";          var end = date.now();          console.log( "load time:", end - start, "ms" );        }, { useworker: true } );      }      //      function hackmaterials( materials ) {        ( var = 0; < materials.length; ++ ) {          var m = materials[ ];          if ( m.name.indexof( "body" ) !== -1 ) {            var mm = new three.meshphongmaterial( { map: m.map } );            mm.envmap = texturecube;           mm.combine = three.mixoperation;           mm.reflectivity = 0.75;            materials[ ] = mm;          } else if ( m.name.indexof( "mirror" ) !== -1 ) {            var mm = new three.meshphongmaterial( { map: m.map } );            mm.envmap = texturecube;           mm.combine = three.multiplyoperation;            materials[ ] = mm;          } else if ( m.name.indexof( "glass" ) !== -1 ) {            var mm = new three.meshphongmaterial( { map: m.map } );            mm.envmap = texturecube;           mm.color.copy( m.color );           mm.combine = three.mixoperation;           mm.reflectivity = 0.25;           mm.opacity = m.opacity;           mm.transparent = true;            materials[ ] = mm;          } else if ( m.name.indexof( "material.001" ) !== -1 ) {            var mm = new three.meshphongmaterial( { map: m.map } );            mm.shininess = 30;           mm.color.sethex( 0x404040 );           mm.metal = true;            materials[ ] = mm;          }          materials[ ].side = three.doubleside;        }      }      //      function createscene( geometry, materials, x, y, z, s ) {        loader.statusdomelement.style.display = "none";        geometry.center();        hackmaterials( materials );        var material = new three.meshfacematerial( materials );        mesh = new three.mesh( geometry, material );       mesh.position.set( x, y, z );       mesh.scale.set( s, s, s );       scene.add( mesh );      }      //      function onwindowresize( event ) {        screen_width = window.innerwidth;       screen_height = window.innerheight;        renderer.setsize( screen_width, screen_height );        camera.aspect = screen_width / screen_height;       camera.updateprojectionmatrix();        cameracube.aspect = screen_width / screen_height;       cameracube.updateprojectionmatrix();      }       function ondocumentmousemove(event) {        mousex = ( event.clientx - windowhalfx );       mousey = ( event.clienty - windowhalfy );      }      //      function animate() {        requestanimationframe( animate );        render();      }      function render() {        controls.update();        cameracube.rotation.copy( camera.rotation );        renderer.clear();       renderer.render( scenecube, cameracube );       renderer.render( scene, camera );      }    </script> 

remove codelines container, add after creating renderer:

var previewdiv = document.getelementbyid("preview");     previewdiv.appendchild (renderer.domelement); 

you want attach renderer specific div in html file, not body doing in code.

here jsfiddle: http://jsfiddle.net/l0rdzbej/25/