Appending HTML+RDFa with JavaScript

Question

My JavaScript script is not allowing to be marked up semantically. As you can see in my script below, I am using Schema.org and RDFa.

The problem is that when I validate my page, only the part before the append function is validated. This means that only type, headline, publisher and datePublished comes up.

How can I fix it? I suspect the problem here is the append function.

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

I think the issue is that most of the parts of the article aren't in the <div vocab="http://schema.org/" typeOf="Article"> element. This can be shown to be true if one indents HTML from the first 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>

In the following I have changed the code to create the article div and then append the contents to it and then append it to the document. The following is untested but I think it might work.

$(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);
    }
  });
});