今回で4回目となりましたが、引き続きjQueryのよく使うメソッドをネイティブのJavaScriptで置き換えていきたいと思います。今回の記事では主に要素を動的に操作したり、外部からデータを通信するなどのアプリケーションでよく使われるメソッドを中心にまとめています。  

要素内の末尾に対象要素を移動・挿入：append() / appendTo()

特定の要素を対象となる要素の中に挿入したり移動したりするメソッドで、「append()」「appendTo()」を使うと末尾から入れていくことができます。両メソッドは同じ挙動をしますが、引数に対象要素が入るか目的の場所となる要素が入るかの違いになります。 【jQuery】

// 挿入要素が引数に入る場合
$("#hoge").append($("#fuga"));

// 挿入エリアが引数に入る場合
$("#fuga").appendTo($("#hoge"));

  ネイティブのJavaScriptでは「appendChild()」を使うことで簡単に代替できます。引数には挿入する対象の要素が入ります。 【JavaScript】

const element = document.getElementById('hoge');
const target = document.getElementById('fuga');
element.appendChild(target);

   

要素内の先頭に対象要素を移動・挿入：prepend() / prependTo()

先ほどのメソッドと同じく、特定要素を対象となる要素内に移動や挿入させることができます。「prepend()」「prependTo()」では逆に先頭から入れていくことができます。こちらも引数に対象要素が入るか目的の場所となる要素が入るかの違いで分かれています。 【jQuery】

// 挿入要素が引数に入る場合
$("#hoge").prepend($("#fuga"));

// 挿入エリアが引数に入る場合
$("#fuga").prependTo($("#hoge"));

  ネイティブのJavaScriptでは「insertBefore()」メソッドを使って前に要素を入れるのですが、引数には対象要素の子要素を指定することで、挿入場所を要素内にすることができます。 【JavaScript】

const element = document.getElementById('hoge');
const target = document.getElementById('fuga');
element.insertBefore(target, element.firstElementChild);

   

対象要素の前に移動・挿入：before() / insertBefore()

「before()」「insertBefore()」では特定の要素を対象となる要素の前に移動・挿入ができるようになります。つまり要素の直前に配置させる形になります。こちら引数に対象要素が入るか目的の場所となる要素が入るかの違いで分かれています。 【jQuery】

// 挿入要素が引数に入る場合
$("#hoge").before($("#fuga"));

// 対象要素が引数に入る場合
$("#fuga").insertBefore($("#hoge"));

  ネイティブのJavaScriptではそのまま「insertBefore()」メソッドを使いますが、対象要素の親要素に対してメソッドを実行することで、兄弟要素として要素を直前に配置することができます。 【JavaScript】

const element = document.getElementById('hoge');
const target = document.getElementById('fuga');
element.parentNode.insertBefore(target, element);

   

対象要素の後ろに移動・挿入：after() / insertAfter()

先ほどとは逆で、特定の要素を対象要素の直後に入れるのが「after()」「insertAfter()」です。こちらも引数に対象要素が入るか目的の場所となる要素が入るかの違いで分かれています。 【jQuery】

// 挿入要素が引数に入る場合
$("#hoge").after($("#fuga"));

// 対象要素が引数に入る場合
$("#fuga").insertAfter($("#hoge"));

  同じくネイティブのJavaScriptでも「insertBefore()」メソッドを応用して使うようになります。ポイントは親要素の次の兄弟要素を引数に指定することで、自身の要素の直後に配置する形になります。 【JavaScript】

const element = document.getElementById('hoge');
const target = document.getElementById('fuga');
element.parentNode.insertBefore(target, element.nextElementSibling);

   

要素を置換する：replaceWith() / replaceAll()

「replaceWith()」「replaceAll()」では子要素を指定した要素に置き換えることができます。この際はコピーされず要素自体がそのまま変わります。同じくこちらも引数に対象要素が入るか目的の場所となる要素が入るかの違いで分かれています。 【jQuery】

// 置換する要素が引数に入る場合
$("#hoge").replaceWith('<div id="fuga"></div>');

// 対象要素が引数に入る場合
$('<div id="fuga"></div>').replaceAll($("#hoge"));

  ネイティブのJavaScriptの場合には「replaceChild()」メソッドを使います。ただ直接自身の要素に対して実行するのではなく、親要素に対してメソッドを指定する必要があります。 【JavaScript】

const element = document.getElementById('hoge');
const target = '<div id="fuga"></div>';
element.parentNode.replaceChild(target, element);

   

指定した要素で囲む：wrap() / wrapInner()

その名の通り特定の要素で指定要素を囲む場合に使います。「wrap()」メソッドでは自身を指定要素に囲むように、「wrapInner()」メソッドでは自身の中に要素を作成するという挙動になります。 【jQuery】

// 対象要素自体を指定要素で囲む
$("#hoge").wrap('<div id="fuga"></div>');

// 対象要素の中を指定要素で囲む
$("#hoge").wrapInner('<div id="fuga"></div>');

  両方とも要素に対して新たなHTMLを代入する形になりますが、自身の要素を囲む場合には「outerHTML」プロパティを、自身を子要素として囲む場合には「innerHTML」を使用します。 【JavaScript】

// 対象要素自体を指定要素で囲む
const element = document.getElementById('hoge');
element.outerHTML = `<div id="fuga">${element.outerHTML}</div>`;

// 対象要素の中を指定要素で囲む
const element = document.getElementById('hoge');
element.innerHTML = `<div id="fuga">${element.innerHTML}</div>`;

   

要素を複製する：clone()

全く同じ要素を複製する場合には「clone()」メソッドが便利ですね。シンプルに対象要素に対してメソッドを実行させますが、単独で使うのではなく、上記のように指定の場所へ挿入したりして組み合わせて使うことが多いのではないでしょうか。 【jQuery】

$(".hoge").clone();

  ネイティブのJavaScriptでは「cloneNode()」メソッドを使います。引数にtrueを使うことで子孫要素も丸ごとコピーできます。 【JavaScript】

const element = document.querySelecter('.hoge');
element.cloneNode(true);

   

非同期で通信する：$.ajax()

jQueryのメソッドの中でもよく使われるのが「ajax()」メソッドです。複雑になりがちな非同期通信の処理がシンプルに書くことができます。引数のオブジェクトの中でsuccessキーには通信が成功した場合の処理を、errorキーには失敗した時の処理を記述します。 【jQuery】

$.ajax({
  url: 'https://example.com/sample.txt',
  type: 'GET',
  dataType: 'text',
  success: function(response) {
    console.log(response);
  },
  error: function() {
    alert('通信に失敗しました');
  }
});

  ネイティブのJavaScriptでは「XMLHttpRequest()」を使います。過去にいろんな記事でも紹介している方法ですが、これを使うことで非同期通信が可能になります。下記はGETメソッドですがPOSTも勿論対応可能です。通信したらそのレスポンスにステータスを示すコードが含まれているので、それを条件分岐に使ってエラー時の処理を切り分けるようにします。 【JavaScript】

const request = new XMLHttpRequest();
request.addEventListener('load', (event) => {
  const response = event.target;
  if (response.readyState === 4) {
    if (response.status === 200) {
      console.log(response.responseText);
    } else {
      alert('通信に失敗しました');
    }
  }
});
request.open('GET', 'https://example.com/sample.txt', true);
request.send(null);

   

JSONデータを取得する：$.getJSON()

こちらはJSONデータの取得に特化したメソッドです、先ほどのAjaxのメソッドでも対応可能ですが、よりシンプルにわかりやすくコードを書くことができます。 【jQuery】

$.getJSON('https://example.com/sample.json', function(data){
  console.log(data);
});

  こちらもネイティブのJavaScriptでは「XMLHttpRequest()」を使う形になります。JSONの場合はJSONの文字列でデータが返ってくるので、それをJSON.parse()にしてあげることでJavaScriptで処理しやすいオブジェクトの形に整形することができます。 【JavaScript】

const request = new XMLHttpRequest();
request.addEventListener('load', (event) => {
  const response = event.target;
  if (response.readyState === 4) {
    if (response.status === 200) {
      console.log(JSON.parse(response.responseText));
    } else {
      alert('通信に失敗しました');
    }
  }
});
request.open('GET', 'https://example.com/sample.json', true);
request.send(null);

 

---

  今回は要素を動的に操作するメソッドと外部へ通信するときのメソッドについてまとめてみました。ネイティブのJavaScriptで操作する場合でも意外とややこしいものは少なく、このようなメソッド場合ですと互換性が高いようですね。特にアプリケーションを制作する場合によく使われる印象がありますので、置き換えの際には参考にしてみてはいかがでしょうか。   （参考記事） ・jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えてみる＃1：基本的な操作 ・jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えてみる＃2：値の取得・設定 ・jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えてみる＃3：要素の走査選択・絞り込み