IT技术 - jQuery 获取容器的 html，包括容器本身 - 吾爱随笔录

IT技术 javascript jquery

2021-03-13 23:53:22

我如何获取 '#container' 上的 html，包括 '#container' 而不仅仅是里面的内容。

<div id="container">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

我有这个可以在#container 中获取 html。它不包括#container 元素本身。这就是我想要做的

var x = $('#container').html();
$('#save').val(x);

6个回答

如果您将容器包装在一个虚拟P标签中，您还将获得容器 HTML。

你需要做的就是

var x = $('#container').wrap('<p/>').parent().html();

要unwrap()在<p>完成后的标签，你可以添加

$('#container').unwrap();

@mc10 我们可以简单地使用 clone() 并且您不必担心创建额外的元素。 var x = $('#container').clone().wrap('<p/>').parent().html();. 包装的想法很棒，而且比提供的大多数解决方案更简单。

2021-04-26 23:53:22

Firefox 问题已过时，因此我建议投票支持 @MikeM 答案，因为它是纯 JS 版本。

2021-04-30 23:53:22

这有一个更简单的解决方案。看我的回答。

2021-05-05 23:53:22

为什么是<p>标签？不是<div>更有意义吗？

2021-05-13 23:53:22

var x = $('#container').get(0).outerHTML;

更新：从 FireFox 11（2012 年 3 月）开始，Firefox 现在支持此功能

正如其他人指出的那样，这在 FireFox 中不起作用。如果你需要它在 FireFox 中工作，那么你可能想看看这个问题的答案：在 jQuery 中，是否有任何类似于 html() 或 text() 的函数但返回匹配组件的全部内容？

这是完美的答案，因为用 div 或 p 包装父标签是个坏主意。可能是你的 css 会坏掉。特别是当您使用引导程序（例如表单行）时。因此这个答案非常好。

2021-04-17 23:53:22

这在 Firefox 中有效，并且比目前公认的解决方案更好。

2021-04-25 23:53:22

太棒了。

2021-04-27 23:53:22

这是一种优雅的方式来做到这一点，比接受的答案更好，这只是一个肮脏的黑客

2021-05-07 23:53:22

我喜欢用这个；

$('#container').prop('outerHTML');

这对我来说似乎是最好的解决方案，不需要 dom 操作或伪 dom 操作（包装方法）。并且 jquery 对象已经具有该属性。

2021-05-01 23:53:22

这是最优雅的解决方案。

2021-05-02 23:53:22

喜欢这个解决方案

2021-05-04 23:53:22

var x = $('#container')[0].outerHTML;

使用 .clone() 有效，但这更干净，imo。接受的答案在 DOM = bad 中创建新元素。

2021-05-11 23:53:22

Firefox 问题已过时，因此我建议对此答案进行投票。

2021-05-13 23:53:22

$('#container').clone().wrapAll("<div/>").parent().html();

更新：outerHTML 现在可以在 Firefox 上使用，所以除非您需要支持非常旧版本的 Firefox，否则请使用其他答案

externalHTML 属性在 Firefox 上不起作用，因此您需要使用 clone 来完成

2021-04-16 23:53:22

其它你可能感兴趣的问题