createElement jQuery로 표현하는 방식
가능하면 jQuery로 사용하기 위해서 찾아 보았습니다.
동적으로 처리 하는것은 소스와 개발자도구에서 봤을대와 다릅니다.
실제 웹페이지에서 보이는것은 개발자 도구를 보고 판단을 해야 됩니다. 받아진 HTML 소스를 보고 판단하면 원하는 결과를 얻을 수 없을 것입니다.
$.create로 예제가 있는것이 있는데 현재 버전에선 작동하지않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery test </title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="test1" style="position: relative; width: 300px; height: 200px; border: solid 1px red;"></div>
<div id="test2" style="position: relative; width: 300px; height: 200px; border: solid 1px blue;"></div>
</body>
</html>
<script>
$(document).ready(function()
{
// javascript
var wrapper1 = document.createElement("img");
wrapper1.setAttribute("src", img_url);
wrapper1.setAttribute("id", 'i33');
wrapper1.setAttribute("class", 'c33');
wrapper1.setAttribute("style", 'top:35%; left:25%; position: absolute;');
test1.appendChild(wrapper1);
// jquery
// - 오래된 예제는 안되는 것이 있는데 이 방식이 맞다
var odv = $("<img>").attr({ "src": img_url, "id":"i22", "class":'c22', "style":'top:35%; left:25%; position: absolute;'});
$( "#test2").append(odv);
});
</script>
위소스를 개발자 도구를 통해서 보면 아래와 같이 추가 된것을 볼 수 있습니다.