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>';

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

$(〇〇〇).remove();