创建li元素并将文本分配给数据属性的Javascript正在被截断。

Question

在javascript中，我创建了如下所示的li元素，它只包含我所看到的问题。

数据-视频url显示了完整的url，所以一切都很好。

问题是entry.link和entry.title，在调试时，我验证了字符串在引号内。即“这是一个吊舱。”然而，数据-视频标题和数据-视频数据正在被截断。即“此”将从前面的示例中显示出来。

我不知道后两个数据分配中发生了什么，因为我已经验证了文本不是双引号等等。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>";

您还需要确保避免使用属性中的任何引号。