Динамическое изменение только отдельных частей контейнера

Question

Скрипка : https://jsfiddle.net/1b81gv7q/

Извинения за несколько непонятный заголовок; Я не мог придумать лучшего выражения.

В любом случае, допустим, у меня есть контейнер с контентом, который я хочу динамически поменять.

Как мне заменить все в template DOM-узле , кроме на static-container? Обратите внимание, что таргетинг на h1 и p, в частности, не является допустимым решением. Весь контейнер template должен быть заменен, но static-container должен быть сохранен и должен (конструктивно) оставаться там, где он находится, как последний дочерний элемент template.

Не ищем React / Vue / Angular / Framework-зависимых решений. Только для JS или JQuery, пожалуйста.

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

.new-template {
  display: none;
}

<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>

Answer 1

Я бы просто перебрал каждого потомка и проверил, соответствует ли он .static-container, прежде чем заменить:

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;
  });
};

.new-template {
  display: none;
}

<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>

Answer 2

Когда вы создаете переменную newTemplate, добавьте содержимое статического контейнера в эту переменную (объедините все элементы, которые вам нужно отобразить в новом шаблоне)

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

.new-template {
  display: none;
}

<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>

Answer 3

Вы можете выполнить цикл и проверить, имеет ли DOM класс static-container , и если нет, то удалить его. Затем, когда останется только static-контейнер , добавьте к нему новый шаблон, чтобы static-container оставался последним элементом.

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

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