内容を書き換える

innnerHTMLとinnnerText/textContentの違いを理解する

[ソース]

<script>
<!--

window.addEventListener("load",function(){ 
	document.getElementById("htmlBtn").addEventListener("click",function(){ 
		var bunsyo1 = document.getElementsByTagName("textarea")[0].value; // textareaの内容を変数bunsyo1に代入
			document.getElementsByTagName("output")[0].innerHTML = bunsyo1; // outputに変数bunsyo1を代入して記述
							});
																			
	document.getElementById("textBtn").addEventListener("click",function(){ 
		var bunsyo2 = document.getElementsByTagName("textarea")[0].value; // textareaの内容を変数bunsyo2に代入
	/*	var ele = document.getElementsByTagName("output")[0]; // outputの内容を変数eleに代入
			ele.textContent = bunsyo2; // 変数eleをテキスト形式で出力 */
			
			若しくは
			document.getElementsByTagName("output")[0].textContent = bunsyo2;	
							});
});

//-->
</script>

<form>
	<textarea cols="40" rows="10">サンプル<b>Text</b>です。
	<br />
	<input type="button" id="htmlBtn" value="innerHTML(タグの意味を読み込んで)で書き換え" />
	<input type="button" id="textBtn" value="innerText/textContent(見たまま)で書き換え" />
</form>

<p>ここ</p>
「ここ」はpのinnerHTMLであり、pのfirstChild.nodeValueである

「document~innerHTML = ;」と「ele.textContent = ;」の違いを理解する。




[実行結果]

インデックスに戻る