わかりやすいJavaScript！-3 動かしてみよう

絵文字のりんごを左から右へ動かします。画面表示したらすぐに動き出さいます。まず全体のコードから。

const new_element = document.createElement('div')

let eltop = 50;
let elleft = 100;    
    
new_element.style.position = "absolute";

new_element.style.backgroundColor = "#add8e6 ";
new_element.style.width = "20px";
new_element.textContent = '🍎'

document.body.appendChild(new_element)

function move(){
  elleft += 1;
  new_element.style.top = `${eltop}px`;
  new_element.style.left = `${elleft}px`;
  
}

setInterval(move, 10);

大事なところは

CSSでの表示位置の座標指定を絶対配置にしています。

new_element.style.position = "absolute";

表示位置を

let eltop = 50;
let elleft = 100;

と変数で定義。そして、これを変化させる関数

function move(){
　elleft += 1;
　new_element.style.top = `${eltop}px`;
　new_element.style.left = `${elleft}px`;
}

あとはそれを実際に動かす方法として"setInterval()"を使います。

setInterval(move, 10);

関数moveを10mm秒ごとに実行する命令になります。

実行させると左から右へ動いていきます

この場合は絵文字のりんごの表示場所が変数で定義し、その変数の値を変えていくことで動かします。

変数の数字を変化させることで表示位置が変化し動きます。これは直接的に絵文字の座標を変えて動かしています。

参考

画像を使う場合の取得の方法。body要素に追加しています(画面に表示)。

const newElement = document.createElement("img");　・・作成
newElement.src = "./sample.png";　　・・・　画像取得
document.body.appendChild(newElement)　　・・・　追加

[JavaScript] HTMLを動的に作成する方法 - Qiita