JavaScript - innerHTML

공통사항

<h1>DOM(Document Object Model) - innerHTML</h1>
	<hr>
	<ul>					// 변경
		<li>메뉴-1</li>
		<li>메뉴-2</li>
		<li>메뉴-3</li>
	</ul>
	<ul>
		<li>메뉴-4</li>
		<li>메뉴-5</li>
		<li>메뉴-6</li>
	</ul>
	<hr>
	<div id="text"></div> 	// 추가

태그내용 변경

<script type="text/javascript">
	var ulList=document.getElementsByTagName("ul");
	var liList=ulList.item(0).getElementsByTagName("li");
	var liE=liList.item(1);//<li>메뉴-2</li>
//Node(Element) 객체의 첫번째 자식 객체(Text 객체)의 노드내용 변경 - 태그내용 변경
	//liE.firstChild.nodeValue="신메뉴";//<li>신메뉴</li>
var liT=document.createTextNode("신메뉴");//Text 객체 생성하여 변수에 저장
	//Node.replaceChild(newChild, oldChild) : Node(Element) 객체의 자식 Node(Element) 객체를 변경하는 메소드
	liE.replaceChild(liT, liE.firstChild);

태그내용 추가

/*
	var pE=document.createElement("p");//<p></p>
	var pT=document.createTextNode("p 태그의 내용");
	pE.appendChild(pT);//<p>p 태그의 내용</p>
	var textE=document.getElementById("text");
	textE.appendChild(pE);
*/
var textE=document.getElementById("text");
	//Node.innerHTML : Node(Element) 객체의 하위태그를 저장한 프로퍼티
	// => Node.innerHTML 프로퍼티를 사용하여 Node(Element) 객체의 하위태그 변경 가능
	textE.innerHTML="<p>p 태그의 내용</p>";
</script>