将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>