JavaScriptで要素の移動で要素の移動をする際に、取得したものが[object]となってしまいます。

Question

前提・実現したいこと

JavaScriptで要素の移動を試みておりまして、HTMLにあるinput要素を全て別の場所「.result」に移動したいです。

途中まで作ったものがあるので、よろしければご覧下さい。
https://jsfiddle.net/315nyuad/

発生している問題・エラーメッセージ

取得した要素の結合時に[object]となってしまい解決策がわかりません。

該当のソースコード

<p>「.result」の中身をコメントアウトしてあるようにしたいです。</p>

<div class="target">
  <div class="text1">
    <input class="kmnty" type="text">
  </div>
  <div class="text2">
    <input class="okafs" type="text">
  </div>
  <div class="text3">
    <input class="jeagn" type="text">
  </div>
  <div class="text4">
    <input class="ewhnn" type="text">
  </div>
  <div class="text5">
    <input class="yghwp" type="text">
  </div>  
  <div class="number1">
    <input class="uoirw" type="number">
  </div>
  <div class="number2">
    <input class="pldxd" type="number">
  </div>
  <div class="number3">
    <input class="wgoui" type="number">
  </div>
  <div class="number4">
    <input class="adtgh" type="number">
  </div>
  <div class="number5">
    <input class="aqwuy" type="number">
  </div>   
</div>

<div class="result">
<!-- <div class="move1"> -->
<!-- <input class="kmnty" type="text"> -->
<!-- <input class="uoirw" type="number"> -->
<!-- </div> -->
<!-- <div class="move2"> -->
<!-- <input class="okafs" type="text"> -->
<!-- <input class="pldxd" type="number"> -->
<!-- </div> -->
</div>

試したこと

JavaScript初心者で、下記のようなコードで試してみましたが、上述のとおり[object]となってしまいます。

$(function(){

  // ➀：inputの取得（text1とnumber1）
  var text1 = $('.text1 input');
  var number1 = $('.number1 input');
  var item1 = '<div class="move1">'+text1+number1+'</div>';
  
  // ➁：inputの取得（text2とnumber2）
  var text2 = $('.text2 input');  
  var number2 = $('.number2 input');
  var item2 = '<div class="move2">'+text2+number2+'</div>';
  
  // ➂➃➄：同様にinputをitem3からitem5に取得したい
  
  // ➅：取得した要素を全て移動
  var resultitem = $.extend(item1, item2); //item1からitem5までを結合 
  $('.result').html(resultitem); //結合したものを移動
  
});

補足情報（FW/ツールのバージョンなど）

jQuery1.12.4を使用しています。
尚、現状のHTMLに対してクラス付与などあらゆる変更は不可とします。
宜しくお願い致します。

Answer 1

$(function(){

  // ➀：inputの取得（text1とnumber1）
  var text1 = $('.text1 input')[0].outerHTML;
  var number1 = $('.number1 input')[0].outerHTML;
  var item1 = '<div class="move1">'+text1+number1+'</div>';
  
  // ➁：inputの取得（text2とnumber2）
  var text2 = $('.text2 input')[0].outerHTML;  
  var number2 = $('.number2 input')[0].outerHTML;
  var item2 = '<div class="move2">'+text2+number2+'</div>';
  
  // ➂➃➄：同様にinputをitem3からitem5に取得したい
  
  // ➅：取得した要素を全て移動
  var resultitem = item1 + item2; //item1からitem5までを結合 
  $('.result').html(resultitem); //結合したものを移動
  
});

Comments

[ka2ga2]

できました。ありがとうございました。

[root_jp]

$('.result').html(ここは文字列である必要があります)
引数にオブジェクトを渡しているからobjectと表示されるのです。

[ka2ga2]

なるほど。outerHTMLというのも初めて知りました。以後気を付けます。

Answer 2

デバッグしようぜ！！

JavascriptのChromeでのデバッグ方法個人的まとめ2016

Comments

[ka2ga2]

ご意見さんくす

[退会済みユーザー]

意見じゃないですよ～根本的な解決策です。顧客の本当の要求というやつ。

[ka2ga2]

なるほど～

[退会済みユーザー]

高評価と低評価が競ってるの趣がある