如何使用 jquery 获取 DIV 中的全部内容？答案

【问题标题】：How can I get the entire contents inside of a DIV with jquery?如何使用 jquery 获取 DIV 中的全部内容？
【发布时间】：2021-09-23 18:39:04
【问题描述】：

我想在我的页面上选择一个 div 并返回在其中找到的所有内容。总而言之，我的意思是所有格式的 HTML、文本、html 对象和 div 内的任何其他内容。我似乎找不到这样做的方法。

示例：

假设我有：

<div id="div1">
    This is a sample<br/>
    <img src="sample.jpg"/>
</div>

我在 JQuery 中使用一个简单的选择器来获取 div

$('#div1'). <what??!>

我试过了

.text, .contents, .html, .innerHTML

我希望 .html 能做到这一点，但是......以上都不会让我得到里面的标签，而且我还没有找到另一个我可以尝试的属性。让我得到任何东西的那些将返回 html 元素之外的文本，但没有别的。

预期结果是：

This is a sample<br/>
<img src="sample.jpg"/>

我确定这很简单，但为什么我不能将键盘包裹在它周围。

更清楚地了解我真正想要完成的工作：

我有一个打开了可编辑内容的 div。这使我可以从剪贴板中粘贴图像数据，该剪贴板在 div 内添加一个标签，其中包含 src 的 base64 数据。我需要捕获添加的元素及其所有属性。

【问题讨论】：

jQuery 在 2021 年大张旗鼓地进行简单的 DOM 爬取和突变。我建议您使用纯 JS，因为这些天对于所有浏览器来说几乎都是一样的（事实并非如此） 15 年前创建 jQuery 时），你将建立一个有市场的技能组合。 document.getElementById('div1').innerHTML 应该可以解决问题。
@RyanWheale 无论您的建议是否有效，它都不能回答问题。我完全了解如何用 javascript 编写代码，但我要问的是 jQuery，因为那是我负责使用的库。实际上，我知道如何在 jQuery 中做到这一点，但我没有得到预期的结果，我认为这是因为我将图像粘贴到 div 中，而 jQuery 在事后处理内容时遇到了困难。
jQuery 只是对 JavaScript 的抽象——您不必将它用于所有 DOM 交互。我想我想说的是……如果您在抽象方面遇到问题，请使用真正的 JavaScript。我保证无论谁授权 jQuery，都不会因为它而解雇你。如果他们这样做了，你无论如何都不想为那个小丑工作。

标签： html jquery jquery-selectors

【解决方案1】：

$("#div1").html() 可以解决问题，您只需要添加圆括号

您在输出中看到的空格来自 html，删除那里的空格以获得简洁的解决方案

console.log($("#div1").html())

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
  <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  <title>Document</title>
</head>
<body>
  <div id="div1">
    This is a sample<br/>
    <img src="sample.jpg"/>
</div>
</body>
</html>

【讨论】：

一天有多么不同...我完全使用了您使用的选择器并使用了我提到的所有其他选择器但是在将图像粘贴到 div 之后我再也没有找回标记数据。它会获取所有文本并忽略所有标签，我无法解释。所以我认为 jquery 出于某种原因在读取粘贴的值时遇到了困难。结果我今天又回到了它并再次尝试了......而且，正确，.html() 工作......我只是不明白为什么昨天没有。谢谢。