ラボ > Javascript関連:DOM関連

jquery 要素の取得、追加など

要素からテキストを取り出したり、追加したり・・・そんなヤツら。innerHTMLやhtml()、append()など

作成日:2017-12-25, 更新日:2018-01-02

対象要素からテキストの抜き出し

▼対象要素

<div id="zebra">〇〇<br />〇</div>
<script>
var sample = $("#zebra");
</script>

タグなしのテキストのみ

textContent
対象タグ内のテキスト取得。空白やタブなども取得
var str = sample[0].textContent;
innerText
textContentからタブや、(cssの設定等で)表示されない文字は取得しない
var str = sample[0].innerText;
outerText
※ブラウザによって利用できないので・・・詳細は割愛
var str = sample[0].outerText;

タグあり

innerHTML
対象内のタグつきのtextContent
var str = sample[0].innerHTML; // 〇〇<br />〇

対象込みのタグあり

outerHTML
対象込みのタグつきのtextContent
var str = sample[0].outerHTML; // <div id="zebra">〇〇<br />〇</div>

対象要素のテキスト編集

▼対象要素

<span class="zebra">あいうえお</span><span class="zebra">かきくけこ</span>
<script>
var str = '丸ごとシマウマ';
var sample = $(".zebra");
</script>
innerText
n番目の要素:対象内をテキストに差し替え
sample[0].innerText = str; // 0番目を差し替えて、「丸ごとシマウマかきくけこ」となる
// sample[0].textContent = str; // innerTextとtextContent・・・使いドコで分けることは無いと思う。
text()
全要素:対象内をテキストに差し替え
sample.text(str); // すべての要素がさし変わるので「丸ごとシマウマ丸ごとシマウマ」となる
innerHTML
n番目の要素:対象内をHTMLに差し替え
sample[0].innerHTML = str;
html()
全要素:対象内をHTMLに差し替え
sample.html(str);

対象要素の〇〇〇に要素を追加

▼追加する要素例

var elm = '<div>丸ごとシマウマ</div>';
append()
対象要素の中の最後に要素を追加
$(〇〇〇).append(elm);
prepend()
対象要素の中の最初に要素を追加
$(〇〇〇).prepend(elm);
before()
対象要素の前に要素を追加
$(〇〇〇).before(elm);
after()
対象要素の後に要素を追加
$(〇〇〇).after(elm);

対象要素を移動

appendTo()、prependTo()、insertBefore()、insertAfter()・・・未調査

対象要素を削除

$(〇〇〇).remove();

formの値

参照:jqueryでformの各値の取得やセット

関連項目

jqueryでformの各値の取得やセット