Воссоздать элемент HTML с помощью JavaScript

Если вы имеете в виду, что хотите воссоздать эти элементы с помощью Javascript после их удаления. Для этого вы можете использовать свойство createElement объекта документа. Затем добавьте созданный элемент в div с классом person-infos. Демонстрация тому есть.

const infos = document.querySelector(".person-infos");

// Create each child elements respectively
const image = document.createElement("img")
image.classList.add("photo");
const name = document.createElement("div");
name.classList.add("name");
const age = document.createElement("div");
age.classList.add("age");

// Append those nodes to their parent element
infos.appendChild("image");
infos.appendChild("name");
infos.appendChild("age");

Надеюсь, это ответит на ваш вопрос.

Как сказал @Barmar, вы можете использовать createElement и appenChild для создания, а затем добавления элемента в DOM. Если вы хотите добавить элемент раньше других, используйте prepend

const infos = document.querySelector(".person-infos")
const nomeCandidato = document.querySelector(".name")
const partidoCandidato = document.querySelector(".age")

const elementsInfo = infos.children

infos.remove()

let div = document.createElement('div')
div.className = "person-infos"
document.body.appendChild(div)
let img = document.createElement('img')
img.className = "photo"
div.appendChild(img)
let div2 = document.createElement('div')
div2.className = "name"
div.appendChild(div2)
let div3 = document.createElement('div')
div3.className = "age"
div.appendChild(div3)
let div4 = document.createElement('div')
div4.className = "IamBefore"
div.prepend(div4)

<div class = "person-infos">
      <img class = "photo">
      <div class = "name"></div>
      <div class = "age"></div>
  </div>

Мне действительно любопытно, потому что я думаю, что ваш вопрос можно интерпретировать двумя способами:

1. Вы пытаетесь просто воссоздать элемент с нуля или:

2. Вы хотите просто удалить элемент(ы) из dom для восстановления позже, возможно, у вас нет хорошего способа запомнить прикрепленные к нему данные, или они были динамическими, и вы не знаете, что такое содержимое. были.

В обоих случаях да, они оба возможны, и решение в основном одно и то же.

Вот примеры, которые проще, чем полностью заново создавать элементы, которые вы хотите удалить, а затем добавить обратно позже:

индекс.html:

<div class='parent-element'>
    <p class='child-element'>This is static text that is always the same.</p>
</div>

script.js (ванильное решение):

// Remove the element
const parent_element = document.querySelector('.parent-element);
const child_element = document.querySelector('.child-element);
parent_element.remove(child_element);

// Put it back (there's a couple different ways but here's one of them):
parent_element.appendChild(child_element);

script.js (решение JQuery):

// Fetch the parent element & remove the child element
const parent_element $('.parent-element');
const child_element = $('.child-element').detach(); // detach maintains event handlers/etc, don't use .remove() here!!!

// Put the child element back
parent_element.append(child_element);

Имейте в виду, что оба этих примера должны сохранять все данные, связанные с child-element (элементом, который мы удалили, а затем вернули обратно в DOM).

Когда вы удаляете div.person-infos, он и его дочерние элементы больше не существуют. Вам необходимо кэшировать HTML-код элементов в rewrite-html, чтобы иметь возможность повторно добавлять их. Вот минимальный воспроизводимый пример делая это. Воссоздание div.person-infos с кешированной информацией об элементе имени/возраста выполняется с помощью InsertAdjacentHTML в кешированном parentNode.

const cache = {};
const infos = document.querySelector(".person-infos");

setTimeout(() => {
  // cache the elements within div.person-infos
  // including its parent
  cache.elementsInfo = {
    parent: infos.parentNode, 
    name: infos.querySelector(`.name`).outerHTML,
    age: infos.querySelector(`.age`).outerHTML};

  console.info(infos, `removed`);
  // remove div.person-infos
  infos.remove();
  
  // wait two seconds, then re-add div.person-infos
  // with the cached information, using 
  // insertAdjacentHTML
  setTimeout( () => {
    cache.elementsInfo.parent.insertAdjacentHTML(
      `beforeend`, 
      `<div class = "person-infos">
        ${cache.elementsInfo.name}
        ${cache.elementsInfo.age}
      </div>`);
      console.info(
        document.querySelector(`.person-infos`), 
        `with cached name/age re-added`);
  }, 2000);
}, 1000);

<h3>remove and re-add</h3>
<div class = "person-infos">
  <img class = "photo">
  <div class = "name">NAME</div>
  <div class = "age">AGE</div>
</div>

Или, может быть, вы хотите переместить элементы имени/возраста из одного элемента в другой? Вот способ сделать это (на этот раз с помощью InsertAdjacentElement).

const cache = {};
const infos = document.querySelector("[data-person-id='1']");

// cache the elements within div.person-infos
// including its parent (must be cloned, because
// after removing they won't exist anymore)
console.info(`cloning name/age from div[data-person-id='2'] to cache`);
cache.person1 = [
  infos.querySelector(`.name`).cloneNode(true),
  infos.querySelector(`.age`).cloneNode(true)
];

setTimeout(() => {
  console.info(`children (name/age) person 1 removed`);

  // remove div[data-person-id='1'] *children*
  infos.querySelectorAll(`.name, .age`).forEach(el =>
    el.remove());

  // wait two seconds, then add the cached elements
  // to div[data-person-id='2']
  // using insertAdjacentElement
  setTimeout(() => {
    const moveToElem = document.querySelector(`[data-person-id='2']`);
    cache.person1.forEach(elem => 
      moveToElem.insertAdjacentElement(`beforeend`, elem));
    console.info(
      `moved cached name/age to div[data-person-id='2']`);
  }, 2000);
}, 1000);

.person-infos:before {
  content: 'person 'attr(data-person-id);
  display: block;
  color: green;
  margin-top: 0.3rem;
}

h3 {
  margin-bottom: -0.5rem;
  border-bottom: 1px solid #EEE;
}

<h3>Move</h3>
<div class = "person-infos" data-person-id = "1">
  <div class = "name">NAME person 1</div>
  <div class = "age">AGE person 1</div>
</div>

<div class = "person-infos" data-person-id = "2">
</div>