使用 JavaScript 附加 HTML+RDFa

Question

我的 JavaScript 脚本不允许在语义上进行标记。正如您在下面的脚本中所见，我使用的是 Schema.org 和 RDFa。

问题是当我验证我的页面时，只有append 函数之前的部分被验证。这意味着只有类型、标题、出版商和 datePublished 出现。

我该如何解决？我怀疑这里的问题是append 函数。

$(document).ready(function(){
                        $.getJSON(webhose_request, function(results){ //send request to API and store results in "results"
                            //parse the results' from the JSON response and display them //in a div element for example <div class='webhoseapi'></div>
                            //we can loop to display all results in a for loop or using the results.posts.lenght; or just display a few.

                            for (var i = 0; i < 10; i++) {
                                // you need to read the JSON results to know how to parse them, for example here results.posts[i].text
                             var articletext = results.posts[i].text;
                              // we use regular expressions REGEX to replace any new line '\n' and carriage return '\r' with html breaks </br>
                              articletext = articletext.replace(/(?:\r\n|\r|\n)/g, '</br>');
                                $(".webhose").append('<div vocab="http://schema.org/" typeOf="Article"><div property="headline" class="whtitel">'+results.posts[i].thread.title_full.substring(0,110)+'</div><div class="source"><b>Source:</b><span property="publisher"> '+results.posts[i].thread.site+'</span></div></div>');
                                if(results.posts[i].thread.author){
                                    $(".webhose").append('<div class="whpublished"><b>By:</b> <span property ="author">'+results.posts[i].thread.author+'</span></div>');
                                }
                                $(".webhose").append('<div class="whpublished"><b>Date published:</b><em><span property="datePublished"> '+results.posts[i].thread.published.substring(0,10)+'</p></span></em> </div>');
                                //we check if there is an image for this posts then display
                                if(results.posts[i].thread.main_image){
                                    $(".webhose").append('<div class="whimage"><img property="image" src="'+results.posts[i].thread.main_image+'" height="125" width="200"/></div>');
                                }
                                $(".webhose").append('<div property="articleBody" class="wharttext">'+articletext.substr(0,500)+'... <div class="whlink"><a property="url" href= '+results.posts[i].thread.url+'> Read full article »</a></div></div><br>');
                            }
                        });
                    });

Answer 1

我认为问题在于文章的大部分部分不在<div vocab="http://schema.org/" typeOf="Article"> 元素中。如果一个人从第一个追加缩进 HTML，这可以证明是正确的：

<div vocab="http://schema.org/" typeOf="Article">
  <div property="headline" class="whtitel">'+results.posts[i].thread.title_full.substring(0,110)+'</div>
  <div class="source"><b>Source:</b><span property="publisher"> '+results.posts[i].thread.site+'</span></div>
</div>

在下文中，我更改了代码以创建文章 div，然后将内容附加到其中，然后将其附加到文档中。以下内容未经测试，但我认为它可能有效。

$(document).ready(function() {
  $.getJSON(webhose_request, function(results) { //send request to API and store results in "results"
    //parse the results' from the JSON response and display them //in a div element for example <div class='webhoseapi'></div>
    //we can loop to display all results in a for loop or using the results.posts.lenght; or just display a few.

    for (var i = 0; i < 10; i++) {
      // you need to read the JSON results to know how to parse them, for example here results.posts[i].text
      var articletext = results.posts[i].text;
      // we use regular expressions REGEX to replace any new line '\n' and carriage return '\r' with html breaks </br>
      articletext = articletext.replace(/(?:\r\n|\r|\n)/g, '</br>');

      var article = $('<div vocab="http://schema.org/" typeOf="Article"></div>');

      article.append('<div property="headline" class="whtitel">' + results.posts[i].thread.title_full.substring(0, 110) + '</div>')
      article.append('<div class="source"><b>Source:</b><span property="publisher"> ' + results.posts[i].thread.site + '</span></div>');)
      if (results.posts[i].thread.author) {
        article.append('<div class="whpublished"><b>By:</b> <span property ="author">' + results.posts[i].thread.author + '</span></div>');
      }
      article.append('<div class="whpublished"><b>Date published:</b><em><span property="datePublished"> ' + results.posts[i].thread.published.substring(0, 10) + '</p></span></em> </div>');
      //we check if there is an image for this posts then display
      if (results.posts[i].thread.main_image) {
        article.append('<div class="whimage"><img property="image" src="' + results.posts[i].thread.main_image + '" height="125" width="200"/></div>');
      }
      article.append('<div property="articleBody" class="wharttext">' + articletext.substr(0, 500) + '... <div class="whlink"><a property="url" href= ' + results.posts[i].thread.url + '> Read full article »</a></div></div><br>');

      $(".webhose").append(article);
    }
  });
});