Jquery .html method does not seem to work-CodePudding

The editor project I am making should allow me to Import a cdn library and use it to write code . So to show my problem , enter https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js in the import cdn input and click import . Then enter this in the code section :

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const animate = function () {
    requestAnimationFrame( animate );
    cube.rotation.x  = 0.01;
    cube.rotation.y  = 0.01;
    renderer.render( scene, camera );
};

animate();

Click the run button at the top . You should get a tiny three js window at the bottom. My first question is , why is the text undefined coming above the render ? And two , if you change the code in the input to :

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const animate = function () {
    requestAnimationFrame( animate );
    cube.rotation.x  = 0.01;
    cube.rotation.y  = 0.01;
    renderer.render( scene, camera );
};

animate();

It adds another render to the div . Why ? especially when I have used the .html method to replace the contents of the div . My complete code is visible here

CodePudding user response：

By inspecting the Javascript console, it's clear that the renderer is not added to #body2 but rather to the document.body.

This line:

document.body.appendChild( renderer.domElement );

appends the renderer to the body element.

The undefined is because of String( eval( $("#editor #editor-textarea").val() ));

The text content in eval must return something. https://www.w3schools.com/jsref/jsref_eval.asp

In this case, the return value of $("#editor #editor-textarea").val() is undefined. Hence eval(undefined) is undefined and String(undefined) is "undefined"