Преобразуйте строку HTML в объекты DOM с помощью jQuery

Question

У меня есть HTML в строке JavaScript (содержащей обычный вложенный HTML). Используя jQuery, могу ли я преобразовать это в действительный элемент HTML за один раз, используя любую из функций document.create*? Мое требование - использовать document.getElementById для созданного объекта DOM.

Answer 1

Возьмите простой вложенный пример.

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

создайте HTML-элементы DOM, используя функцию jquery $ (), и добавляйте их куда хотите я взял «тело», но вы можете добавить куда угодно.

$(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>');

абсолютно нормально.