JavaScriptでHTMLの追加をしてホームページ上に表示することができました。次はその表示したものを操作したいでね。その方法です。

背景色がついた絵文字とボタンを作ります。ボタンを押せば絵文字の背景が消えるというものを作ります。

まず操作したいもの今回は絵文字"🍎"とします。全体は

const new_element = document.createElement('div')

let eltop = 50;
let elleft = 100;    
    
new_element.style.position = "absolute";
new_element.style.top = `${eltop}px`;
new_element.style.left = `${elleft}px`;


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

document.body.appendChild(new_element)

となります。

の部分は表示する場所を指定しています。

の部分は表示のスタイルを指定している部分です。

最後に今まで指定してきた内容を画面に追加し表示させる命令です。これで目に見えるようになります。

次にボタンを作っていきます。絵文字とほぼ一緒です。

何かしたらというイベントを作ります。ボタンを押したら何か変化させたいのでマウスでクリックしたら動くボタンを作ります。全体です。

const btn = document.createElement('div')

let bttop = 150;
let btleft = 100;    
    
btn.style.position = "absolute";
btn.style.top = `${bttop}px`;
btn.style.left = `${btleft}px`;


btn.style.backgroundColor = "#add8e6 ";
btn.style.width = "50px";
btn.textContent = 'Button'

document.body.appendChild(btn)

btn.addEventListener('click', () =>{

　new_element.style.backgroundColor = "#fff ";

});

違うところは

となります。

でクリックしたときに実行されるようなものを作ることができます。実行される部分は

背景色を変える命令となっています。これでクリックしたら背景が白になって背景が消えたように見えます。