Javascript Question posted in
A very good W3school tutorial can be found here.

Is there a way to go back on <div> original state after appending child inside it with Javascript?

Is there a way to go back on original state after appending child inside it with Javascript?

This is how I append child to my div if the condition is met:
document.getElementById("myList1").appendChild("node");
And if the condition does not meet I want document.getElementById("myList1") go back to its normal state, without the appendChild, is there a way like this document.getElementById("myList1").reset();

I tried to parent.removeChild(child); but it removes all child of the parent, I only need to remove what was added by appendChild.

Tags:

3

Answers


  1. 0

    You can get the current HTML content of a selected element by using innerHTML on the element. You can reassign the saved innerHTML once you want to reset.

    let saved_content = "";
const el_content = document.querySelector(".content");
const el_txt = document.querySelector("#txt");
const el_tp = document.querySelector("#tp");

function add() {
  const new_el = document.createElement(el_tp.value);
  new_el.innerText = el_txt.value;
  
  el_content.appendChild(new_el);
}

function restore() {
  el_content.innerHTML = saved_content;
}

function restore_point() {
  saved_content = el_content.innerHTML;
}
    <div class="cmd">
  Txt: <input placeholder="Text" id="txt" /> Tp: <input id="tp" placeholder="div" value="div" />
</div>

<div class="cmd">
  <button onclick="add()">Add</button>
  <button onclick="restore()">Restore</button>
  <button onclick="restore_point()">Set Restore Point</button>
</div>

<div class="content"></div>
    Login or Signup to reply.
  2. 0

    If you want to remove all objects which are in the <div> use this code:

    var div = document.getElementById("DIV_NAME");
div.innerHTML = "";
    Login or Signup to reply.
  3. 0

    Yes, you can go back to the original state of a element after appending a child using JavaScript. Before making any modifications, it’s important to maintain a copy of the original information or to refer back to it. Here’s an example that combines the two methods:

    Approach 1: Cloning the Original Content

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restore Original State</title>
</head>
<body>

<div id="myDiv">
  <!-- Original content -->
  <p>This is the original content of the div.</p>
</div>

<button onclick="appendNewContent()">Append Child</button>
<button onclick="restoreOriginalState()">Restore Original State</button>

<script>
  // Store a reference to the original content
  const originalContent = document.getElementById('myDiv').innerHTML;

  function appendNewContent() {
    const myDiv = document.getElementById('myDiv');
    const newElement = document.createElement('p');
    newElement.textContent = 'This is the newly appended content.';
    myDiv.appendChild(newElement);
  }

  function restoreOriginalState() {
    const myDiv = document.getElementById('myDiv');
    // Restore the original content by setting the innerHTML
    myDiv.innerHTML = originalContent;
  }
</script>

</body>
</html>

    Approach 2: Keeping a Reference to the Original State

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restore Original State</title>
</head>
<body>

<div id="myDiv">
  <!-- Original content -->
  <p>This is the original content of the div.</p>
</div>

<button onclick="appendNewContent()">Append Child</button>
<button onclick="restoreOriginalState()">Restore Original State</button>

<script>
  // Store a reference to the original div
  const myDiv = document.getElementById('myDiv');

  function appendNewContent() {
    const newElement = document.createElement('p');
    newElement.textContent = 'This is the newly appended content.';
    myDiv.appendChild(newElement);
  }

  function restoreOriginalState() {
    // Clear the existing content and append the original content
    myDiv.innerHTML = '';
    const originalContent = document.createElement('p');
    originalContent.textContent = 'This is the original content of the div.';
    myDiv.appendChild(originalContent);
  }
</script>

</body>
</html>

    After adding a child element, you can restore the to its initial state using either method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search