ラボ > 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();