Question

我有一个像这样的textarea的表单：

<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似乎是最合乎逻辑的一步。

我将代码放在this JSFiddle

中

我在这里缺少什么，我需要做些什么才能成功地将HTML转换为DOM，将其删除，将其转换回HTML并将其作为HTML格式化回来？

Answer 1

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

Answer 2

jQuery对象包含anchor元素，但html方法不返回jQuery元素中元素的HTML代码，它返回里面的HTML代码元素jQuery对象。

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

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

Answer 3

我认为that（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);

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

3 个答案: