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

Question

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

Answer 1

举个简单的嵌套例子。

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

使用 jquery 的 $() 函数创建 HTML DOM 元素并附加到您想要的任何位置。
我已经采取了“身体”，但你可以附加到任何地方。

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

或者，您可以使用纯 JavaScript 来实现：

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

Answer 2

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

Answer 3

// 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>';

Answer 4

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

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

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

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

绝对是美好的。