Question

我有一个我想要渲染的HTML字符串，但在第一段之后附加了一些HTML。

function insertStuff() {
  //var string = "<div><p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p></div>"; works
  var string = '<p><img src="http://example.com/my-cool-picture.png" alt="alt text"></p><p>2nd paragraph</p><p>3rd paragrpah</p>' // doesn't work
  var parsedHtml = $(string)
  parsedHtml.find("p:nth-child(2)").after("<p>My cool insert</p>")
  return parsedHtml.html()
}

这适用于上面的HTML字符串，但下面的字符串仅在调用<img>后返回parsedHtml.html()

我做错了什么？

Answer 1

由于您使用.html()，它将返回第一个元素的html。

您可以将内容包装在div中

var parsedHtml = $('<div />').html(string)

然后你的代码就可以了。

＆＃13;

function insertStuff() {
  var string = '<p><img src="http://example.com/my-cool-picture.png" alt="alt text"></p><p>2nd paragraph</p><p>3rd paragrpah</p>'
  var parsedHtml = $('<div />').html(string)
  parsedHtml.find("p:nth-child(2)").after("<p>My cool insert</p>")
  return parsedHtml.html()
}

alert(insertStuff())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

试试这个

function insertStuff() {
  var string = '<div><p><img src="http://example.com/my-cool-picture.png" alt="alt text"></p><p>2nd paragraph</p><p>3rd paragrpah</p></div>';
  var parsedHtml = $(string)
  parsedHtml.find("p:nth-child(2)").after("<p>My cool insert</p>")
  return parsedHtml.html()
}

您应将此字符串放在div parent。

中

Answer 3

那是因为html方法作为getter返回集合中第一个元素的html内容。你应该用另一个元素包装集合中的所有顶级元素并读取它的html内容或遍历集合并连接每个元素的outerHTML属性。

parsedHtml.map(function() { return this.outerHTML; }).get().join('');

如果您想获得该集合中所有元素的innerHTML，请将outerHTML替换为innerHTML。

Answer 4

当你使用带有选择器的find（）时，它将在该选择器内（在子节点中）搜索为什么当你使用带有div标签的字符串时你获得了所需的结果，当你删除div时出现了问题

在HTML字符串的某段后插入HTML

4 个答案: