Javascript를 사용하여 HTML 문서에 임의의 요소를 배치하는 방법은 무엇입니까?

Question

저는 자바 스크립트 게임을 개발 중이며 HTML 문서에 무작위로 동전을 넣어야합니다. 지금까지이 코드를 사용했습니다 :

createCoin() { 
    section=document.createElement("div"); 
    section.innerHTML='<img src="./img/coin.png"/>'; 
    document.body.appendChild(section); 
} 

이 코드는 단순히 이미지 코인을 문서의 좌표 (0,0)에 배치합니다. 내가하고 싶은 일은 최근에 "div"를 만든 액세스이며 다른 함수에서 생성하는 무작위 좌표를 부여하는 것입니다. 그래서 여러 번 createCoin을 호출하면 문서에 여러 개의 동전이 생성됩니다. 나는 jQuery를 사용할 수 없다. 어떤 아이디어?

Answer 1

createCoin div를 반환 한 다음 사용하십시오. 예를 들어

createCoin() { 
    section=document.createElement("div"); 
    section.innerHTML='<img src="./img/coin.png"/>'; 
    document.body.appendChild(section); 

    section.style.position = 'absolute'; 
    section.style.left = '0px'; // units ('px') are unnecessary for 0 but added for clarification 
    section.style.top = '0px'; 

    return section; 
} 

: var coin = createCoin(); coin.style.left = ???; coin.style.top = ???;

Answer 2

후 div에있는 임의의 위치를 ​​제공하기 위해, ID = '동전'와 DIV 요소를 만들고, 이것을 사용 :

<div id="coin" style="position:absolute">coin image</div> 

<script language="javascript" type="text/javascript"> 
function newPos(){ 
    var x=Math.random()*1000; 
    x=Math.round(x); 
    var y=Math.random()*500; 
    y=Math.round(y); 
    document.getElementById("coin").style.left=x+'px'; 
    document.getElementById("coin").style.top=y+'px'; 
} 
newPos(); 
</script> 

우리가 고려하는 것이 createCoin() 함수 onload() 이벤트에서 한 번 실행합니다. newPos() 함수를 실행해야합니다.