get, set
in Programming on jQuery
jQuery
Get / Set
1) input, select, etc = val()
2) att(“attribute name”) > GET
att(“attribute name”,”value”) > SET
3) print html tag (applied) > html()
4) print text (html not applied) > text()
//get
<script>
$(function(){
$("#txt1").val();
});
</script>
<body>
<input type="text" id="txt1" value="text1" />
</body>
//set
<script>
$(function(){
$("#txt1").val("text2");
});
</script>
<body>
<input type="text" id="txt1" value="text1" />
</body>
// get attribute value
<script>
$(function(){
$("#div1").attr("style");
$("#div2").attr("class");
});
</script>
<body>
<div id="div1" style="display: block;">
Test1
</div>
<div id="div2" class="testDiv">
Test2
</div>
</body>
// set attribute value
<script>
$(function(){
$("#div1").attr("style","color:red;");
$("#div2").attr("style","color:blue;");
});
</script>
<body>
<div id="div1" style="display: block;">
Test1
</div>
<div id="div2" class="testDiv">
Test2
</div>
</body>
// get html
<script>
$(function(){
$("#node1").html();
});
</script>
<body>
<div id="node1">
<table>
<tr>
<td>
<h2>table</h2>
</td>
</tr>
</table>
</div>
</body>
// set html
<script>
$(function(){
$("#node2").html("<h1>test</h1><h2>test</h2>");
});
</script>
<body>
<div id="node2">
</div>
</body>
// set text (not applied HTML)
<script>
$(function(){
$("#node2").text("<h1>test</h1><h2>test</h2>");
});
</script>
<body>
<div id="node2">
</div>
</body>
Before / After / Prepend / Append
//before
<script>
$(function(){
let html = '<div><h1>inserted layout</h1></div>';
$("#layer2").before(html);
});
</script>
<body>
<div id="layer1">
<h2>first layout</h2>
</div>
<div id="layer2">
<h2>second layout</h2>
</div>
<div id="layer3">
<h2>third layout</h2>
</div>
</body>
//after
<script>
$(function(){
let html = '<div><h1>inserted layout</h1></div>';
$("#layer2").after(html);
});
</script>
<body>
<div id="layer1">
<h2>first layout</h2>
</div>
<div id="layer2">
<h2>second layout</h2>
</div>
<div id="layer3">
<h2>third layout</h2>
</div>
</body>
//Prepend
<script>
$(function(){
let html = '<h1>inserted layout</h1>';
$("#layer2").prepend(html); //first son of the node
});
</script>
<body>
<div id="layer1">
<h2>first layout</h2>
</div>
<div id="layer2">
// here
<h2>second layout1</h2>
<h2>second layout2</h2>
<h2>second layout3</h2>
<h2>second layout4</h2>
</div>
<div id="layer3">
<h2>third layout</h2>
</div>
</body>
//Append
<script>
$(function(){
let html = '<h1>inserted layout</h1>';
$("#layer2").prepend(html); //last son of the node
});
</script>
<body>
<div id="layer1">
<h2>first layout</h2>
</div>
<div id="layer2">
<h2>second layout1</h2>
<h2>second layout2</h2>
<h2>second layout3</h2>
<h2>second layout4</h2>
// here
</div>
<div id="layer3">
<h2>third layout</h2>
</div>
</body>