仅动态更改容器的选择性部分

Question

小提琴：https://jsfiddle.net/1b81gv7q/

道歉有点模糊的标题;我无法想到更好的措辞。

无论如何，让我们说我有一个容器，内容我想动态换出。

如何替换template除{/ em>之外的static-container DOM节点中的一切？请注意，定位h1和p并非有效解决方案。必须替换整个template容器，但static-container应保留，并且应保留（结构上）template的最后一个孩子。

不寻求React / Vue / Angular /框架相关的解决方案。请使用纯JS或jQuery。

＆＃13;

＆＃13;

$('button').click(function() {
  let newTemplate = $('.new-template').html();
  $('.template').html(newTemplate);
});

＆＃13;

.new-template {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="template">
    <h1>header #1</h1>
    <p>some text for #1</p>
    <div class="static-container">
      <div>
        <p>a b c 1 2 3</p>
        <p>d e f 4 5 6</p>
      </div>
    </div>
  </div>
</div>

<button>change template</button>

<div class="new-template">
  <h1>header #2</h1>
  <p>some text for #2</p>
  <div class="static-container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以遍历并检查DOM是否具有 static-container 类，如果没有删除它。然后只剩下 static-container ，将新模板添加到其中，以便 static-container 保留为最后一个元素。

$('button').click(function() {
  $(".template").children().each(function() {
    if(!$(this).hasClass("static-container")) {
      $(this).remove();
    }
  });

  var newTemplate = $('.new-template').html();
  $('.template').prepend(newTemplate);
});

Answer 2

我只是迭代每个孩子并在替换之前测试它是否与i匹配：

＆＃13;

＆＃13;

.static-container

＆＃13;

document.querySelector('button').onclick = function() {
  const newTemplate = document.querySelector('.new-template');
  [...document.querySelector('.template').children].forEach((child, i) => {
    if (child.matches('.static-container')) return;
    child.innerHTML = newTemplate.children[i].innerHTML;
  });
};

＆＃13;

.new-template {
  display: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

当您创建newTemplate变量时，将静态容器的内容添加到该变量中。（连接您需要在新模板中显示的所有元素）

＆＃13;

＆＃13;

var staticContainer = $('.static-container')
$('button').click(function() {
  let newTemplate = $('.new-template').html() + staticContainer.html();
  $('.template').html(newTemplate);
});

＆＃13;

.new-template {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="template">
    <h1>header #1</h1>
    <p>some text for #1</p>
    <div class="static-container">
      <div>
        <p>a b c 1 2 3</p>
        <p>d e f 4 5 6</p>
      </div>
    </div>
  </div>
</div>

<button>change template</button>

<div class="new-template">
  <h1>header #2</h1>
  <p>some text for #2</p>
  <div class="static-container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;