如何在执行 javascript 后更新 html 文件的值？

Question

我们从不同来源动态获取数据，然后 javascript（例如，数据注入器）使用该数据更新多个控件 - 文本框、下拉列表和复选框等控件以及其他一些在执行 javascript 后获取更新数据的控件。 html 页面视图更新，显示正确的值。

我们需要将最终的 html 发送到另一个无法执行 javascripts 的系统（例如，终端服务）。 但是更新并没有反映在 outerHtml 中。 我们如何强制更新反映在 Html 中的 DOM，或者我们如何获得最终的 html。

我们无法更改数据注入器 javascript 以使用此处建议的属性更新 - 为什么输入的值属性没有更改？ 即document.getElementById("p1").setAttribute("value", "New text"); 不可行

 <html> <body> <h2>JavaScript can Change HTML</h2> <input id="p1" value="initial" /> <p>The paragraph above was changed by a script.</p> <script> document.getElementById("p1").value = "New text"; //This works fine - injector js updates multiple controls - input, select, checkbox etc. console.log(document.getElementById("p1").value); //This shows updated value - page view is updated properly // TODO: Can we Force html refresh/update - how?? // console.log(document.getElementById("p1").outerHTML); //Issue is here, it shows old value. How to get full html with all new values, expected by end service </script> </body> </html>

outerHtml 中的实际值 - <input id="p1" value="initial">

终端服务的期望值 - <input id="p1" value="New text">

如果有任何其他方法可以在不更改数据注入器脚本的情况下实现上述要求，我们不限于使用 outerHtml。 如何获取更新的 html 以发送到终端服务？

从 javascript 获取值后，如何从 outerHTML 中获取更新的值？

Answer 1

使用 setAttribute

 document.getElementById("p1").setAttribute("value", "New text"); //This works fine - injector js updates multiple controls - input, select, checkbox etc. console.log(document.getElementById("p1").value); //This shows updated value - page view is updated properly console.log(document.getElementById("p1").outerHTML);

 <h2>JavaScript can Change HTML</h2> <input id="p1" value="initial" /> <p>The paragraph above was changed by a script.</p>

也许只有当你需要

 document.getElementById("p1").value = "New text" console.log(document.getElementById("p1").value); //This shows updated value - page view is updated properly console.log(document.getElementById("p1").outerHTML); document.getElementById("saveAttr").addEventListener("click", function() { document.querySelectorAll('input').forEach(inp => inp.setAttribute('value', inp.value)); console.log(document.getElementById("p1").outerHTML); })

 <h2>JavaScript can Change HTML</h2> <input id="p1" value="initial" /> <p>The paragraph above was changed by a script.</p> <button type="button" id="saveAttr">Save all attributes</button>

如何在执行 javascript 后更新 html 文件的值？

问题描述

1 个解决方案

解决方案1
0 2022-01-10 13:23:05

如何在执行 javascript 后更新 html 文件的值？

问题描述

1 个解决方案

解决方案1 0 2022-01-10 13:23:05

解决方案1
0 2022-01-10 13:23:05