如何使用來自 DOM 的元素更新 HTML 字符串
[英]How to update an HTML string with an element from DOM
問題描述
我正在嘗試使用來自 DOM 的元素更新字符串化 HTML 元素。 此字符串化 HTML 元素位於 localStorage 的數組中。
首先，這是我如何將其轉換為可操作的 HTML：
let toBeUpdated = document.createElement('div');
toBeUpdated.innerHTML = `${var_stringify_html_from_localstorage}`;
toBeUpdated = toBeUpdated.firstElementChild;
這個toBeUpdated元素是一個 div，其中包含一個 id updateMe的元素。 我想用來自 DOM 的元素更新這個“虛擬”（不可見） #updateMe元素。
我先試過：
let updateme = toBeUpdated.querySelector("#updateMe");
let updateme_DOM = document.querySelector("#updateMe");
toBeUpdated.replaceChild(updateme, updateme_DOM);
返回Uncaught DOMException: Node.replaceChild: Child to be replaced is not a child of this node
其次，我嘗試了：
let updateme = toBeUpdated.querySelector("#updateMe");
let updateme_DOM = document.querySelector("#updateMe");
updateme.replaceWith(updateme_DOM);
這會從 DOM 中刪除原始的#updateMe並且不會更新toBeUpdated元素。
我顯然錯過了一些東西，但我看不到什么......
我試圖盡可能地重現我的情況：
//initial state of local storage let motd = ["<div id='toBeUpdated'><h1>Hello World</h1><p id='updateMe'>Message of tomorrow</p></div>"]; window.localStorage.setItem('motds', JSON.stringify(motd)); // My situation, later in the code let motds = JSON.parse(window.localStorage.getItem('motds')); let toBeUpdated = document.createElement('div'); toBeUpdated.innerHTML = `${motds[0]}`; toBeUpdated = toBeUpdated.firstElementChild; // this is the div#toBeUpdated let DOMUpdateMe = document.getElementById('updateMe'); let storageUpdateMe = toBeUpdated.querySelector("#updateMe"); // getElementById doesn't work here // Replace storageUpdateMe.replaceWith(DOMUpdateMe); // Back in local storage motds[0] = toBeUpdated.outerHTML; window.localStorage.setItem('motds', JSON.stringify(motds));
<body> <div id="toBeUpdated"> <h1>Hello World</h1> <p id="updateMe">Message of tomorrow</p> </div> </body>
3 個解決方案
解決方案1
1 2021-05-17 16:49:48
它使用firstChild而不是firstElementChild
let toBeUpdated = document.createElement('div'); //toBeUpdated.innerHTML = `${var_stringify_html_from_localstorage}`; toBeUpdated.innerHTML = `<div id="updateMe">New DIV</div>`; let updateme = document.getElementById('updateMe') updateme.replaceWith(toBeUpdated.firstChild);
<div id='updateMe'>Old DIV</div>
解決方案2
1 已采納 2021-05-17 19:24:33
您似乎唯一缺少的是在將 DOM 節點插入非 DOM 之前克隆它。
這是您的代碼的逐步復制，僅更改此代碼即可。 為了清楚起見，我還將localStorage的初始 state 設置為“今天的消息”。
localStorage是用變量模擬的，因為由於 CORS 它會在代碼段內觸發安全錯誤
//initial state of local storage let motd = ["<div id='toBeUpdated'><h1>Hello World</h1><p id='updateMe'>Message of today</p></div>"]; //window.localStorage.setItem('motds', JSON.stringify(motd)); //Read from local storage //let motds = JSON.parse(window.localStorage.getItem('motds')); const motds = JSON.parse(JSON.stringify(motd)); //Simulate local storage console.log("In storage:", motds); //Create element outside of DOM const toBeUpdated = document.createElement('div'); toBeUpdated.innerHTML = motds[0]; console.log("To be updated:", toBeUpdated.outerHTML); //Get part to update const DOMUpdateMe = document.getElementById('updateMe'); const storageUpdateMe = toBeUpdated.querySelector("#updateMe"); console.log(DOMUpdateMe, storageUpdateMe); //Replace part outside of DOM with clone of part from DOM storageUpdateMe.replaceWith(DOMUpdateMe.cloneNode(true)); console.log(toBeUpdated.outerHTML); //Store back motds[0] = toBeUpdated.outerHTML; motd = JSON.stringify(motds); //Simulate local storage console.log(motd); //window.localStorage.setItem('motds', JSON.stringify(motds));
<body> <div id="toBeUpdated"> <h1>Hello World</h1> <p id="updateMe">Message of tomorrow</p> </div> </body>
解決方案3
0 2021-05-17 17:11:47
您不應該使用簡單的newUpdateMe = DOMUpdateMe;
//initial state of local storage let motd = ["<p class='updateMe'>Message of the day<p>"]; window.localStorage.setItem('motds', JSON.stringify(motd)); // My situation, later in the code let motds = JSON.parse(window.localStorage.getItem('motds')); let dOMUpdateMe = document.querySelectorAll('#toBeUpdated > *'); let counter = 0; dOMUpdateMe.forEach(function(dOMToUpdate) { console.log(dOMToUpdate); if(dOMToUpdate.classList.contains('updateMe')) { motds[counter] = dOMToUpdate.outerHTML; counter++; } }) window.localStorage.setItem('motds', JSON.stringify(motds));
<div id="toBeUpdated"> <h1 class="updateMe">Hello World</h1> <p class="updateMe">Update Me</p> <p class="no">No not Update Me</p> <p class="no">No not Update Me</p> <p class="no">No not Update Me</p> <p class="updateMe">Update Me too</p> <p class="no">No not Update Me</p> </div>
如何將HTML字符串從flask應用程序傳遞到HTML模板作為DOM元素，然后是appendChild
[英]How to pass HTML string from flask app to HTML template as a DOM element and then appendChild
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.