jquery - 在 JQuery 中将 HTML 转换为 DOM 对象，反之亦然

Question

我有一个带有这样的文本区域的表单：

<textarea id="code"><a href='test.html'><img src='test.jpg'></a></textarea>

我正在把这段代码变成这样的 DOM 对象：

var code=$("#code").val();
var banner=$(code);

执行此操作时：

alert(banner.html());

我明白"<img src='test.jpg'>"了，我期待完整的代码（"<a href='test.html'><img src='test.jpg'></a>"）

当我执行时，alert(banner.attr('href')我得到'test.html'了，这是我所期望的，它表明 DOM 对象是正确且完整的。

我最终想要做的是处理 HTML，在 href 上运行一些搜索，操作它，然后将结果写回 textarea。将其转换为 DOM 似乎是最合乎逻辑的步骤。

我把代码放在这个 JSFiddle

我在这里遗漏了什么，我需要做什么才能成功地将 HTML 转换为 DOM、对其进行操作、将其转换回 HTML 并将其作为 HTML 放回？

Answer 1

jQuery 对象包含锚元素，但该html方法不返回 jQuery 元素中元素的 HTML 代码，它返回jQuery 对象中元素内部的 HTML 代码。

您可以将元素放在另一个元素中以获取 HTML 代码：

var html = $('<div>').append(banner).html();

Answer 2

<a>是根元素，所以你得到它的innerHTML <img>，你可能想要outerHTML，alert(banner[0].outerHTML); 试试看http://jsfiddle.net/9Awu4/

Answer 3

我认为（ JSFiddle 链接）是你想要的：

// grab the html source
var code=$("#code").val();

// convert to dom
var banner = $('<div>').html(code);
// find anchor and change attribute
banner.find('a').attr("href","manipulated.html");

// back to source code
code = banner.html()

// set content back into text area
$("#code").val(code);