Document.createElementNS()
공식 문서에 따르면 Document.createElementNS() 는 지정된 네임스페이스 URL과 적합한 이름으로 element를 만든다 한다.
좀 더 쉽게 설명하자면 네임스페이스를 사용하여 새 Element 노드를 생성한다.
찾아보니 대부분이 SVG example이다..
SVG는 XHTML 언어이므로 동적으로 생성할때는 createElement 를 사용하면 안되고 createElementNS 를 사용해야 한다고 한다.
아래 코드로 어떻게 쓰이는지 감을 잡았다..🙄
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>createElementNS</title>
<script type="text/javascript">
var svgNS = "http://www.w3.org/2000/svg";
function main() {
var svg=document.getElementById('svg');
var w = parseFloat(svg.getAttributeNS(null, 'width'));
var h = parseFloat(svg.getAttributeNS(null, 'height'));
var circle = document.createElementNS(svgNS,"circle");
circle.setAttributeNS(null,"cx" , w/2);
circle.setAttributeNS(null,"cy" , h/2);
circle.setAttributeNS(null,"r" , w > h ? h/2 : w/2);
circle.setAttributeNS(null,"fill" ,"#f72");
circle.setAttributeNS(null,"stroke","none");
svg.appendChild(circle);
}
</script>
</head>
<body onload='main()'>
<svg id='svg' height="500" width="800" />
</body>
</html>createElement
네임스페이스 URL을 지정하지 않고 엘리먼트를 만들려면 createElement 메소드를 사용하면 된다.
하지만 createElement를 사용해서 동적 삽입할 경우 개발자도구의 태그에는 추가된 것으로 보이지만 실제로 화면에 그려지지 않는다.
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);- namespaceURI : 새 element에 대한 네임스페이스를 가리키는 유일한 식별자이다. 네임스페이가 없으면 null이 할당된다.
- qualifiedName : 새 element에 대한 완결된 이름
return 값
element 지정된 name과 namespace를 갖는 새로 생성된 element 노드
참고
🧀 개발을 하면서 도움이 되었던 부분을 기록하는 공간입니다 🧀