Javascript 将静态HTML页面转换为动态生成的jQuery

我有一个奇怪的要求，我们有静态html/css/图像。然后，我需要将这些静态页面转换为使用javascript/jquery动态生成的页面。我们正在处理100多个这样的例子

例如：

<div id='foo' title='my title'>Hi there!</div>

你好！ 将转换为：

$('<div/>', {
    id: 'foo',
    title: 'my title',
    text: 'Hi there!'
}).appendTo('#mySelector');

$（“”{
id:‘foo’，
标题：“我的标题”，
短信：“你好！”
}).appendTo（“#我的选民”）；

有没有一种方法可以通过编程实现这一点？我在谷歌上搜索了一下，但什么也没找到。

像这样的东西

<div></div>

$('div').append('<p></p>');
$('div p').attr({
    'id':'foo',
    'title':'my title'
}).text('Hi there!');

$（'div'）。追加（'p>
'）；
$（'div p'）.attr({
“id”：“foo”，
“标题”：“我的标题”
}).text（“你好！”）；

输出：

<div><p id="foo" title="my title">Hi there!</p></div>

你好

---

这似乎是一件非常奇怪的事情。通常，您应该尽可能多地使用静态HTML，只对需要动态生成的部分使用Javascript，如基于运行时数据的表。您不需要使用这样的对象，只需执行

$（“#mySelector”）。append（“Hi here！”）。这保留了原始HTML的大部分结构。你可以在编辑器中使用全局替换来完成这项工作。我知道这很奇怪。我们有一个奇怪的要求。这就是我问这个问题的原因。不幸的是，你问错了地方。第三方软件建议显然是离题的。您可以加载一个脚本，将
DOM
解析为
json
字符串，然后手动复制并粘贴该脚本以保存您自己的
.json
文件。从那里，您可以使用JavaScript将您想要的
.json
文件中的片段加载到DOM中。是的。我正在寻找一种自动化的方法