他のdivからdivにコンテンツを動的にロードする方法

Question

同じページのdivのコンテンツを、押したボタンに対して動的に新しいdivにロードしたいとします。つまり、あるdivのボタンを押すと、そのdivの内容が読み込まれます。 jQueryのなし

<!-- CONTENT SOURCE --> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 

 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div class="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div>

Answer 1

<!-- CONTENT SOURCE --> 
 
<div class="box">button1<!-- SOME CONTENT --><button>button1</button></div> 
 
<div class="box">button2<!-- SOME CONTENT --><button>button2</button></div> 
 
<div class="box">button3<!-- SOME CONTENT --><button>button3</button></div> 
 
<div class="box">button4<!-- SOME CONTENT --><button>button4</button></div> 
 

 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div class="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript"> 
 
    (function ($) { 
 
     $('.box button').on('click',function(){ 
 
      var $element = $(this).closest('.box').clone(); 
 
       
 
      $('button', $element).remove(); 
 
      $('.box-load').html($element.html()); 
 
     }); 
 
    })(jQuery); 
 
</script>

Answer 2

：

function show(cid){ 
 
var content = document.getElementById(cid).innerHTML; 
 
document.getElementById("box-load").innerHTML = content; 
 
}

<!-- CONTENT SOURCE --> 
 
<div class="box"><div id="1">1a</div><button onclick="show('1')"></button></div> 
 
<div class="box"><div id="2">2b</div><button onclick="show('2')"></button></div> 
 
<div class="box"><div id="3">3c</div><button onclick="show('3')"></button></div> 
 
<div class="box"><div id="4">4d</div><button onclick="show('4')"></button></div> 
 

 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div id="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div>

Answer 3

$('.box button').on('click',function(){ 
    var e = $(this).closest('.box').clone(); 
    $('button', e).remove(); //remove the button to get only the content you want 
    $('.box-load').html(e.html()); 
}); 

Answer 4

のjQueryを使用してHTMLを少し変更し、私はこの解決策を考え出した：初期の内容と仮定すると、

$("button").click(function(){ 
 
    var text = $(this).prev().text(); 
 
    $(".box-load").text(text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- CONTENT SOURCE --> 
 
<span class="box">Content 1</span><button>1</button><br> 
 
<span class="box">Content 2</span><button>2</button><br> 
 
<span class="box">Content 3</span><button>3</button><br> 
 
<span class="box">Content 4</span><button>4</button><br> 
 
<br> 
 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div class="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div>

Answer 5

はdiv要素であり、前の（）与えます前の兄弟コンテナのオブジェクト。アサンプションあなたが

$('.box button').on('click',function(){ var html = $(this).prev().html(); $('.box-load').html(html); }); 

jQueryの

使用しているが、それは

は、このソリューションは、それだけの内側にあなたのコンテンツではなく、ボタンを与えるのに役立ちます願っています。