attr(), prop(), html(), text(), val()
■ attr 과 prop 차이
attr 는 html태그의 속성
prop 는 자바스크립트에서 html 태그의 속성
attr() 로 했을때의 <a href="#">link</a> 의 결과
prop() 로 했을때의 <a href="#">link</a>의 결과
a href 태그가 아닌 다른 태그의 속성을 비교 했을때는 거의 같은 값이 나와서 차이를 찾지 못했다.
■ html() 과 text() 의 차이
<div id="divtest" name="divname">
<div id="htmldiv" name="innerhtml">
<p> here tagTxT1 </p>
</div>
<div id="textdiv" name="innertext">
<p> here tagTxT2 </p>
</div>
</div>
html() 은 값을 가져 올때 html 태그와 그 사이에 있는 값을 다 가져옴
<div id="divtest" name="divname">
<div id="htmldiv" name="innerhtml">
<p> here tagTxT1 </p>
</div>
<div id="textdiv" name="innertext">
<p> here tagTxT2 </p>
</div>
</div>
text() 는 값을 가져 올때 html 태그와 닫는 태그 사이의 값만을 가져옴
<div id="divtest" name="divname">
<div id="htmldiv" name="innerhtml">
<p> here tagTxT1 </p>
</div>
<div id="textdiv" name="innertext">
<p> here tagTxT2 </p>
</div>
</div>
alert($('#divtest').html()) 결과
alert($('#divtest').text())
$('#htmldiv').html('<span><div id="htmldiv" name="innerhtml">html change</div></span>')
$('#textdiv').text('<span><div id="textdiv" name="innerhtml">text change</div></span>')
html로 삽입을 할경우 태그로 들어 가지만 text로 삽입하면 그냥 글자로 삽입 됨.
결과
html 삽입 $('#htmldiv').html('<span><div id="htmldiv" name="innerhtml">html change</div></span>')
text 삽입 $('#textdiv').text('<span><div id="textdiv" name="innerhtml">text change</div></span>')
alert($('#inputid').val())
$('#inputid').val('인풋박스')
alert($('#inputid').val())
결과
val() 는 값을 가져오고
val("설정값") 는 설정값을 셋팅한다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<FORM method="post" action="">
<INPUT type="text" name="" id="inputid"/ value="inputbox">
</FORM>
<a href="#">link</a>
<div id="divtest" name="divname">
<div id="htmldiv" name="innerhtml">
<p> here tagTxT1 </p>
</div>
<div id="textdiv" name="innertext">
<p> here tagTxT2 </p>
</div>
</div>
<script>
//-- attr, prop --//
alert($("a").attr("href"))
alert($("a").prop("href"))
$('form').attr("action","car.do")
$('form').prop({action:"car.do"})
//-- html, text --//
alert($('#divtest').html())
alert($('#divtest').text())
$('#htmldiv').html('<span><div id="htmldiv" name="innerhtml">html change</div></span>')
$('#textdiv').text('<span><div id="textdiv" name="innerhtml">text change</div></span>')
//--val()--//
alert($('#inputid').val())
$('#inputid').val('인풋박스')
alert($('#inputid').val())
</script>
</body>
</html>
