Zenn
🐥

jQueryを使って既存inputをdivに埋め込むコードを書いてみた

2023/02/25に公開
JavaScript
jQuery
tech

やりたいこと

HTMLで定義してあるinputをjQueryで作ったdivの中に埋め込みます。
ただ置き換えやappendだけではうまくできなかったのでそのやり方を紹介します。

処理の流れ

下の流れでコードを組んでみます。

  1. divのjqueryElementを作成
  2. 既存のinputを変数に格納
  3. 既存のinputを1で作成したdivに置き換え
  4. 置き換えたdivに既存のinputを追加

実際のコード

まずは表示用のHTMLを作成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/index.css" />
    <title>append input to div with jquery</title>
  </head>
  <body>
    <input type="text" id="moveInput" />
    <p><input type="button" id="replaceBtn" value="置き換え" /></p>
  </body>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"
  ></script>
  <script src="script.js"></script>
</html>

次に新規のDIVに置き換わったことがわかりやすくするために、CSSでDIVに背景色とpaddingを設定します。

.box {
  background-color: rgb(130, 139, 219);
  padding: 12px;
}

最後に本題のJavaScriptのコードを作成します。


const $moveInput = $("#moveInput"); //既存input
const $newDiv = $("<div></div>").attr("class", "box"); //既存inputを入れるdiv
const $replaceBtn = $("#replaceBtn"); //操作用ボタン

//操作用ボタン押下
$replaceBtn.click(function () {
  //既存inputの親要素をチェック
  if ($moveInput.parent().get(0).tagName === "BODY") {
    /** 既存inputの親要素がBODYの場合 */
    $moveInput.replaceWith($newDiv); //既存inputをdivに置き換える
    $newDiv.append($moveInput); //既存inputをdivに追加する
    $replaceBtn.val("戻す");
  } else {
    /** 既存inputの親要素がBODYじゃない場合 */
    $newDiv.replaceWith($moveInput);//divを既存inputに置き換える
    $replaceBtn.val("置き換え");
  }
});

実行結果

上のコードを実際に動かすと以下のようになります。

置き換えボタンを押すとまず既存inputをdivで置き換えてしまいますが、その前に変数に既存inputを格納することで、メモリ上に既存inputの情報が残り使うことができるようです。

Discussion