创建 li 元素并将文本分配给数据属性的 JavaScript 被 chop

Question

在 javascript 中，我正在创建一个 li 元素，如下所示，其中仅包含我所看到的问题。

data-videoUrl 显示了完整的 url，所以一切都很好。

问题是entry.link和entry.title，在调试时，我验证了字符串是否在引号内。即“这是一个播客”。但 data-videoTitle 和 data-videoDescription 被 chop 。即“This”将从前面的示例中显示。

我不确定后两个数据分配中发生了什么，因为我已经验证文本没有双引号等。html5 数据元素发生了什么？如果需要，我可以提供更完整的示例。

      var podItem = document.createElement("li");
      podItem.innerHTML = entry.title
      + "<a data-videoUrl=" + entry.link + " "
      + "data-videoTitle=" + entry.title + " "
      + "data-videoDescription=" + entry.contentSnippet + " "
      + "</a>";
      document.getElementById("podCastList").innerHTML += podItem.innerHTML;

这是正在生成的 html。

 <a data-videourl="http://rss.cnn.com/~r/services/podcasting/studentnews/rss/~3/d3y4Nh_yiZQ/orig-sn-060614.cnn.m4v" data-videotitle="CNN" student="" news="" -="" june="" 6,="" 2014="" data-videodescription="For" our="" last="" show="" of="" the="" 2013-2014="" school="" year,="" cnn="" takes="" a="" look="" back,="" ahead,="" and="" at="" stories="" making="" ...="" <=""></a>

我确信有些事情我还没有完全理解。为什么第一个数据元素会正确获取文本，而接下来的两个数据元素会分解文本，如下所示:[data-videotitle =“CNN”student =“news =””]。文本是直接引用的句子，即“CNN 学生新闻......”

为什么 videoUrl 可以正常工作而其他两个则不能？

Answer 1

您需要在属性周围添加一些引号...

  podItem.innerHTML = entry.title
  + "<a data-videoUrl=\"" + entry.link + "\" "
  + "data-videoTitle=\"" + entry.title + "\" "
  + "data-videoDescription=\"" + entry.contentSnippet + "\" "
  + "</a>";

您还需要确保转义属性内的任何引号。