javascript - 在某段 HTML 字符串后插入 HTML

Question

我有一个要呈现的 HTML 字符串，但首先要在第 2 段之后附加一些 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)

然后你的代码就可以工作了。

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())

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