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>

将jQuery对象转换为HTML

1 个答案: