使用jQuery将HTML字符串转换为DOM对象

Question

我有一个包含通常的嵌套HTML标签的JavaScript字符串。使用jQuery，我可以使用任何document.create*函数一次性将其转换为有效的HTML元素吗？我的要求是在创建的DOM对象上使用document.getElementById。

- Vineel Kumar Reddy

---

JavaScript 中不应该将 HTML 放在字符串中。 - Raynos

@Raynos：这并不完全正确。如果你从服务器获取一些预先渲染好的HTML呢？ - SLaks

请编辑您的问题，以确认您正在使用像jQuery这样的便捷库。我浪费了不必要的时间编写本地JavaScript代码。 - David Rivers

@SLaks 我同意这并不完全正确。然而，真正正确的是，在 JavaScript 应用程序代码中，HTML 绝不能作为字符串存在。但在库的隐藏层中使用是可以接受的。 - Raynos

@SLaks 禁止在 JavaScript 源代码中使用 HTML 字符串文字。应避免使用包含实际 HTML 的字符串，就像避免接触瘟疫一样。但在某些情况下，如在库中使用它们、将 HTML 作为用户输入或进行调试时，可能会出现特殊情况。 - Raynos

Answer 1

以简单的嵌套示例为例。

var dom_string = '<div>xxx<div>yyy</div></div>';

使用 jQuery 的 $() 函数创建 HTML DOM 元素，并将其附加到所需位置。我已经选择了 "body"，但是您可以将其附加到任何位置。

$(dom_string).appendTo('body');

另外，您可以使用纯JavaScript来实现此操作：

var dom_target = document.getElementById("target");
dom_target.innerHTML = dom_string;

- P K

---

如果没有要求，尽量避免使用jQuery，否则会令人困惑。 - Raynos

Answer 2

创建一个虚拟元素，并将其 innerHTML 设置为你的 HTML 字符串。

- SLaks

---

谢谢。除了文档对象之外，我可以在哪些元素上调用getElementById方法？ - Vineel Kumar Reddy

设置innerHTML后，您的DOM字符串部分会像真正的DOM元素一样运行，因此您可以在字符串的每个嵌套标签上应用getElementById。 - P K

Answer 3

要将Html文本转换为Jquery对象，请使用$()函数：

div = '<div>hello world</div>';
$div = $(div);

但正如其他人所指出的，在大多数情况下，您并不需要这样做，因为DOM操作函数（如append()和prepend()）将接受纯文本，因此

$('body').append('<div>hello world</div>');

绝对没有问题。

- Theo

Answer 4

// Construct a container as a placeholder for your content

var container = document.createElement('div');
container.id = 'container';

// Inject the container into the DOM

document.body.appendChild(container);

// Populate the injected container with your content

container.innerHtml = '<p id="pTag">I am a <em>P</em> tag with some <strong>nested markup</strong>.</p>';

- David Rivers