javascript - 将 jQuery 对象转换为 HTML

Question

我试图在 javascript 中获取一个字符串，解析并替换 HTML 中的一个项目，然后将其转换回一个字符串。我一辈子都想不出如何将新的 jQuery 对象转回 HTML。

var compiled = '<div><div id="header-content">Test</div></div>';
$(compiled).find('#header-content').html('Woot');
var newCompiled = $(compiled).html();
//Need newCompiled to be '<div><div id="header-content">Woot</div></div>'

请帮忙。

Answer 1

您正在修改由 jQuery 创建的 dom 元素，但没有存储对创建的元素的引用

var compiled = '<div><div id="header-content">Test</div></div>';

var $tmp = $('<div />', {
  html: compiled
})

$tmp.find('#header-content').html('Woot');
var newCompiled = $tmp.html();

snippet.log(newCompiled)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

---

如果您只是想将新编译的元素添加到dom中，则无需创建tmp div，而是可以

var compiled = '<div><div id="header-content">Test</div></div>';

var $tmp = $(compiled)

$tmp.find('#header-content').html('Woot');

$tmp.appendTo('body')

div {
  border: 1px solid red;
  padding: 5px;
}
#header-content {
  background-color: lightgrey
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>