将生成的 HTML 存储在变量中答案

【问题标题】：Store generated HTML in variable将生成的 HTML 存储在变量中
【发布时间】：2012-12-12 17:28:49
【问题描述】：

我有一个简单的 jQuery 表格编辑器，并且希望能够将整个表格存储在一个变量中。稍后表格的状态将被保存，类似于迷你 CMS。

我尝试使用 HTML，但它不适用于生成的元素。

最好的方法是什么？另外，.html() 返回的内容是否安全，还是因为innerHTML 的浏览器差异而我不应该使用它？

$("#target").click(function() {
    $('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});

$("#myTable").on('click', '.remove', function(event) {
    $(this).parent().parent().remove();
});

var table = $("#myTable").html();
$("button").click(function() {
    $(".result").html(table);
});

【问题讨论】：

您的意思是要将#myTable 的HTML 内容存储在JavaScript 变量中吗？你的问题不是很清楚。
对于动态生成的元素，您应该改用on。
stackoverflow.com/questions/13844202/…的可能重复
@KundanSinghChouhan 我认为他不是在问如何添加行，而是在问如何保存结果结构。不过，我可能错了。
因为您在 DOM 准备就绪时（即在进行任何修改之前）将其写入变量，所以该变量只包含初始标记，在用户修改之前。

标签： jquery html code-generation innerhtml

【解决方案1】：

尝试将点击处理程序更新为以下内容：

$("button").click(function() {
    var table = $("#myTable").html();
    $(".result").html(table);
});

在这里查看它的工作原理：http://jsbin.com/ucopun/11

【讨论】：

【解决方案2】：

您要将整个表格存储在不同的元素中还是变量中？

如果你想把它存储在一个变量中，那么

$('button').on('click', function(){
    var table_html = '<table id="myTable">' + $('#myTable').html() + '</table>';
    // alert(table_html);
});

小提琴 - http://jsfiddle.net/84ETb/

【讨论】：

【解决方案3】：

你不能在你完成修改之后直接调用html()吗（即当按钮被点击时，而不是当DOM准备好时）

var the_content = $('#myTable').html();

【讨论】：

我做了，但这并没有得到生成的 html，看我的小提琴jsbin.com/ucopun/9
@user1721135 您将不得不碰到父级，然后从父级获取 html。 $('#myTable').parent().html();
您不是在单击按钮时调用.html()，而是在加载文档时调用。将您的行移动到按钮单击中，它可以按您的意愿工作：jsbin.com/ucopun/10
不，他们不是……看看帖子的时间。接受的答案是在我的 5 分钟后发布的......