Javascript 通过Jquery或knockout js在空div中获取html元素

我有3个按钮，单击这些按钮可以将不同的容器添加到外部的空div中

<button id="a" data-bind="clickme" value="1">a</button>
<div id="empty1"> 
<button id="b" data-bind="clickme" value="2">b</button>
<div id="empty2">  
<button id="c" data-bind="clickme" value="3">c</button>
<div id="empty3"> 

<!-- the container below should replace the empty div -->
<div class="container" id="big_container" data-bind="visible : openContainer">
<p> Hello world !</p> 
</div>

---

我正在尝试jquery，但它不起作用，我也尝试了剔除js组件寄存器，但我不确定它是如何工作的。

你可以用jquery这样做。请注意，这会将容器移动到空div，而不仅仅是复制html内容

jQuery（document）.on（'click'，'button[data bind]'，function（）{
jQuery（'div#empty'+jQuery（this.val（））.html（jQuery（'div.container'））；
jQuery（'div.container'）.show（）；
}) ;
div#empty1，div#empty2，div#empty3{
边框：1px纯红；
}

A.
B
C
你好，世界

使用敲除
模板
并使用
ifs
将它们添加到正确的空div中。这样，openContainer实际上是多余的

JS:

HTML:

HTML:



或



脚本：

<script type="text/html" id="big-container-template">
  <div class="container">
      <p> Hello world !</p> 
  </div>
</script>


你好，世界

由于某些原因，我的击出js找不到koNo的结束标记，但我认为可能是我的击出版本有问题，如果错误是
找不到ko的结束标记
。这意味着您丢失了
，我起初也这么认为，但至少三次检查它是否在那里，我正在尝试使用不同的版本希望它能工作。刚才注意到，在我的示例中，我丢失了关闭
标记，如果您有相同的标记，这将导致相同的错误。这是在空沙发上
self.openContainer = ko.observable(false);
self.btnClicked = ko.observable();
self.clickme= function(value){
   self.btnClicked(value)
   if(value == 1){
       self.openContainer(true);
   }
}

<button id="a" data-bind="clickme" value="1">a</button>
<!-- ko if: btnClicked() == 1 -->
<div id="empty1" data-bind="template: { name: 'big-container-template' }"></div> 
<!-- /ko -->
<button id="b" data-bind="clickme" value="2">b</button>
<!-- ko if: btnClicked() == 2 -->
<div id="empty2" data-bind="template: { name: 'big-container-template' }"></div>  
<!-- /ko -->
<button id="c" data-bind="clickme" value="3">c</button>
<!-- ko if: btnClicked() == 3 -->
<div id="empty3" data-bind="template: { name: 'big-container-template' }"> </div> 
<!-- /ko -->

<script type="text/html" id="big-container-template">
  <!-- the container below should replace the empty div -->
  <div class="container" id="big_container" data-bind="visible : openContainer">
  <p> Hello world !</p> 
  </div>
</script>

self.container = ko.observable();
self.clickme= function(value){
   self.container(value)
}

<!-- ko if: container() == 1 -->
<div data-bind="template: { name: 'big-container-template' }"></div> 
<!-- /ko -->

<div data-bind="visible: container() == 1, template: { name: 'big-container-template' }"></div> 

<script type="text/html" id="big-container-template">
  <div class="container">
      <p> Hello world !</p> 
  </div>
</script>