javascriptでHTML要素取得！兄弟や親、子要素も！jQueryとも比較！
javascriptで要素を取得する方法をご紹介していきます。
併せてjQueryでの書き方も記載しておきます。
ご紹介する要素の取得位置はこちら。
「idが"sample"のdiv」を基準としています。
<div> // この要素を取得する方法(親要素) <span>前の要素</span> // この要素を取得する方法(兄弟要素) <div id="sample"> // この要素を取得する方法(ターゲット要素) <span> // この要素を取得する方法(子要素) test // この要素を取得する方法 </span> </div> <span>後の要素</span> // この要素を取得する方法(兄弟要素) </div>
取得位置の上から順に記載していきます。
なお、要素のみ取得(指定)ですので、テキストやHTMLを取得したい時は、
javascriptであればinnerTextやinnerHTML、jQueryであればtext()やhtml()で取得してください。
javascriptで要素を削除する方法をご紹介していきます。
併せてjQueryでの書き方も記載しておきます。
ご紹介する要素の削除位置はこちら。
「idが"sample"のdiv」を基準としています。
<span>上の要素</span> // この要素を削除する方法 <div id="sample"> // この要素を削除する方法 test // この要素を削除する方法 </div> <span>下の要素</span> // この要素を削除する方法</pre>
削除位置の上から順に記載していきます。
javascriptで要素を追加する方法をご紹介していきます。
insertAdjacentHTMLを使用する方法と使用しない方法の2種類を記載していきます。
insertAdjacentHTMLは、だいたいのブラウザで対応済みですが、念のためそれ以外の方法も記載している感じになります。
insertAdjacentHTMLの対応ブラウザ
https://caniuse.com/#feat=insertadjacenthtml
併せてjQueryでの書き方も記載しておきます。
ご紹介する要素の追加位置はこちら。
// ここに要素を追加する方法 <div id="sample"> // ここに要素を追加する方法 test // ここに要素を追加する方法 </div> ここに要素を追加する方法//
追加位置の上から順に記載していきます。
