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

【问题标题】：Convert static HTML page to dynamically generated jQuery将静态 HTML 页面转换为动态生成的 jQuery
【发布时间】：2015-04-15 04:55:06
【问题描述】：

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

例如：

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

将转换为：

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

有没有办法以编程方式做到这一点？我四处搜索，但找不到任何东西。

【问题讨论】：

这似乎是一件很奇怪的事情。通常你应该尽量使用静态 HTML，只对需要动态生成的部分使用 Javascript，比如基于运行时数据的表格。
你不需要使用这样的对象，你可以简单地使用$("#mySelector").append("<div id='foo' title='my title'>Hi there!</div>");。这保留了原始 HTML 的大部分结构。您可以通过编辑器中的全局替换来做到这一点。
我知道这很奇怪。我们有一个奇怪的要求。这就是我问这个问题的原因。
很遗憾，您问错地方了。第三方软件推荐显然是题外话。
您可以加载一个将DOM 解析为json 字符串的脚本，然后手动复制并粘贴它以保存您自己的.json 文件。从那里，您可以使用 JavaScript 将您想要的 .json 文件中的片段加载到 DOM 中。

【解决方案1】：

这样的？

<div></div>

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

输出：

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

【讨论】：