제이쿼리 innerHTML, outerHTML, innerTEXT, outerTEXT
outerHTML은 IE만이 지원
https://blog.outsider.ne.kr/401
innerHTML 의 제이쿼리는 .html();과 같다.
innerTEXT 의 제이쿼리는 .text();와 같다.
function get(){
var target = $("#target")
alert(target.html());
}innerHTML은 자기자신을 제외한 하위의 노드가 아닌 엘리먼트를 가져오고
outerHTML은 자기자신을 포함한걸 가져온다.
사용법은 완전 동일하고 inner , outer만 바꾸면됨.
innerTEXT는 텍스트만 가져오고
//HTML CSS
outerTEXT는 태그를 포함해서 가져온다
//<li>HTML</li><li>CSS</li>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.case{
border: 1px solid black;
height: 20px;
}
</style>
</head>
<body>
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="get()" value="get" />
<input type="button" onclick="set()" value="set" />
<script>
function get(){
var target = document.getElementById("target");
alert(target.innerHTML);
}
function set(){
var target = document.getElementById("target");
target.innerHTML="<li>aaa</li><li>bbb</li>";
}
</script>
</body>
</html>https://opentutorials.org/module/904/6738
1) innerHTML
outerHTML
: 값을 읽을때는 HTML 코드를 포함한!! 문자열을 리턴, 값 변경시 HTML의 코드빼고!! 추가.
2) innerText
outerText
: 값을 읽을 때는 HTML 코드를 제외한!! 문자열을 리턴하고, 값을 변경시 코드를 그대로!!! 추가.
*inner는 자기자신을 제외한 자기 하위의 엘리먼트들을 제어할때,
outer는 자기자신을 포함한 하위 엘리먼트들을 제어할때 사용.
=======================================================
insertAdjacentHTML 는 추가할 코드 위치를 조정할수 있다.
변경할 코드의 부모객체.insertAdjacentHTML('beforebegin','넣을 내용');
->1번째의 앞에 넣음
변경할 코드의 부모객체.insertAdjacentHTML(afterbegin','넣을 내용');
->1번째의 뒤에 넣음
변경할 코드의 부모객체.insertAdjacentHTML('beforeend','넣을 내용');
->막내 앞에
변경할 코드의 부모객체.insertAdjacentHTML('afterend','넣을 내용');
->막내 뒤에
