jQuery DOM謫堺ス

荳隕ァ

蜻ス莉、 讖溯ス
text(ス) 繝繧ュ繧ケ繝亥、画峩
text() 繝繧ュ繧ケ繝亥叙蠕
html(ス) 繝繧ュ繧ケ繝亥、画峩
html() 繝繧ュ繧ケ繝亥叙蠕
prepend(ス) 隕∫エ縺ョ蜈磯ュ縺クHTML謖ソ蜈・
append(ス) 隕∫エ縺ョ譛ォ蟆セ縺クHTML謖ソ蜈・
before(ス) 隕∫エ縺ョ蜑阪↓HTML謖ソ蜈・
after(ス) 隕∫エ縺ョ蠕後↓HTML謖ソ蜈・
prependTo(ス) 隕∫エ縺ョ蜈磯ュ縺クHTML遘サ蜍
appendTo(ス) 隕∫エ縺ョ譛ォ蟆セ縺クHTML遘サ蜍
insertBefore(ス) 隕∫エ縺ョ蜑阪∈HTML遘サ蜍
insertAfter(ス) 隕∫エ縺ョ蠕後∈HTML遘サ蜍
wrap(ス) 隕∫エ縺ァ蛹繧
wrapAll(ス) 隕∫エ繧偵∪縺ィ繧√※蛹繧
wrapInner(ス) 蟄占ヲ∫エ/繝繧ュ繧ケ繝医r隕∫エ縺ァ蛹繧
unwrap() 隕ェ隕∫エ繧貞炎髯、
replaceWith(ス) 隕∫エ繧堤スョ謠
remove() 隕∫エ繧貞炎髯、
attr(ス,ス) 螻樊ァ蛟、螟画峩
attr(ス) 螻樊ァ蛟、蜿門セ
removeAttr(ス) 螻樊ァ蜑企勁
addClass(ス) class螻樊ァ霑ス蜉
removeClass(ス) class螻樊ァ蜑企勁
css(ス,ス) CSS螻樊ァ蛟、險ュ螳
css(ス) CSS螻樊ァ蛟、蜿門セ

DOM謫堺ス懷多莉、

text(ス)
螟画峩蜑

<section id=”text1″>
<h5>text(ス)</h5>
<p>螟画峩蜑</p>
</section>

<script>
$(function(){
$(“#text1 p”).text(“螟画峩蠕”);
});
</script>

邨先棡
text()

螟画峩蜑




<section id=”text2″>
<h5>text()</h5>
<p id=”texta”>螟画峩蜑</p>
<p id=”textb”></p>
</section>

<script>
$(function(){
$(“#text2 p#textb”).text($(“#text2 p#texta”).text());
});
</script>

邨先棡
html(ス)
螟画峩蜑

<section id=”html1″>
<h5>html(ス)</h5>
<p>螟画峩蜑</p>
</section>

<script>
$(function(){
$(“#html1 p”).html(“螟画峩蠕”);
});
</script>

邨先棡
html()

螟画峩蜑




<section id=”html2″>
<h5>html()</h5>
<p id=”htmla”>螟画峩蜑</p>
<p id=”htmlb”></p>
</section>

<script>
$(function(){
$(“#html2 p#htmlb”).text($(“#html2 p#htmla”).text());
});
</script>

邨先棡
prepend(ス)
謖ソ縲蜈・縲蜑

<section id=”prepend”>
<h5>prepend(ス)</h5>
<p>縲謖ソ縲蜈・縲蜑阪</p>
</section>

<script>
$(function(){
$(“#prepend p”).prepend(“<b>謖ソ蜈・蠕</b>”);
});
</script>

邨先棡

append(ス)
謖ソ縲蜈・縲蜑

<section id=”append”>
<h5>append(ス)</h5>
<p>縲謖ソ縲蜈・縲蜑阪</p>
</section>

<script>
$(function(){
$(“#append p”).append(“<b>謖ソ蜈・蠕</b>”);
});
</script>

邨先棡

before(ス)
謖ソ縲蜈・縲蜑

<section id=”before”>
<h5>before(ス)</h5>
<p>縲謖ソ縲蜈・縲蜑阪</p>
</section>

<script>
$(function(){
$(“#before p”).before(“<b>謖ソ蜈・蠕</b>”);
});
</script>

邨先棡

after(ス)
謖ソ縲蜈・縲蜑

<section id=”after”>
<h5>after(ス)</h5>
<p>縲謖ソ縲蜈・縲蜑阪</p>
</section>

<script>
$(function(){
$(“#after p”).after(“<b>謖ソ蜈・蠕</b>”);
});
</script>

邨先棡

prependTo(ス)
遘サ蜍募燕

遘サ蜍募セ

<section id=”prependTo”>
<h5>prependTo(ス)</h5>
<p>遘サ蜍募燕</p>
<b>遘サ蜍募セ</b>
</section>

<script>
$(function(){
$(“#prependTo b”).prependTo(“#prependTo p”);
});
</script>

邨先棡

appendTo(ス)
遘サ蜍募燕

遘サ蜍募セ

<section id=”appendTo”>
<h5>appendTo(ス)</h5>
<b>遘サ蜍募燕</b>
<p>遘サ蜍募セ</p>
</section>

<script>
$(function(){
$(“#appendTo b”).appendTo(“#appendTo p”);
});
</script>

邨先棡

insertBefore(ス)
遘サ蜍募燕

遘サ蜍募セ



<section id=”insertBefore”>
<h5>insertBefore(ス)</h5>
<b>遘サ蜍募燕</b>
<p>遘サ蜍募セ</p>
</section>

<script>
$(function(){
$(“#insertBefore p”).insertBefore(“#insertBefore b”);
});
</script>

邨先棡

insertAfter(ス)
遘サ蜍募燕

遘サ蜍募セ



<section id=”insertAfter”>
<h5>insertAfter(ス)</h5>
<b>遘サ蜍募燕</b>
<p>遘サ蜍募セ</p>
</section>

<script>
$(function(){
$(“#insertAfter b”).insertAfter(“#insertAfter p”);
});
</script>

邨先棡

wrap(ス)
wrap蟇セ雎。



<section id=”wrap”>
<h5>wrap(ス)</h5>
<p>wrap蟇セ雎。</p>
</section>

<script>
$(function(){
$(“#wrap p”).wrap(“<b></b>”);
});
</script>

邨先棡

wrapAll(ス)
wrapAll蟇セ雎。

wrapAll蟇セ雎。



<section id=”wrapAll”>
<h5>wrapAll(ス)</h5>
<p>wrapAll蟇セ雎。</p>
<p>wrapAll蟇セ雎。</p>
</section>

<script>
$(function(){
$(“#wrapAll p”).wrapAll(“<b></b>”);
});
</script>

邨先棡

wrap蟇セ雎。縺ォ蛻・縺ョ隕∫エ縺後≠繧句エ蜷
wrapAll蟇セ雎。

wrapAll蟇セ雎。螟

wrapAll蟇セ雎。



<section id=”wrapAll2″>
<h5>wrapAll(ス)</h5>
<p>wrapAll蟇セ雎。</p>
wrapAll蟇セ雎。螟<br>
<p>wrapAll蟇セ雎。</p>
</section>

<script>
$(function(){
$(“#wrapAll2 p”).wrapAll(“<b></b>”);
});
</script>

邨先棡

table隕∫エ謫堺ス

<table id="tbl">
縲縲<tr><th>1</th><th>a</th></tr>
縲縲<tr><td>2</td><td class="aaa">b</td></tr>
縲縲<tr><td>3</td><td class="aaa">c</td></tr>
</table>

var tbl = document.getElementById('tbl')

$('.aaa').each(function(index, elm){
縲縲縲var val = tbl.rows[index + 1].cells[1].innerHTML;
縲縲縲縲竊致alシ喘

縲縲縲var val = elm.innerHTML;
縲縲縲縲竊致alシ喘
});

Follow me!