Google news box dans div

Question

J'essaye de placer une recherche de nouvelles de google dans une div sur mon emplacement. J'utilise actuellement le script google fourni, mais je suis un novice à Ajax/JavaScript. Je suis capable d'afficher les histoires les plus récentes de google news, mais je ne sais pas comment l'afficher dans un div et encore moins le manipuler avec CSS. Voici le code que j'utilise. Toute aide serait grandement appréciée!

<script type="text/javascript"> 

    google.load('search', '1'); 

    var newsSearch; 

    function searchComplete() { 

     // Check that we got results 
     document.getElementById('averagecontainer').innerHTML = ''; 
     if (newsSearch.results && newsSearch.results.length > 0) { 
     for (var i = 0; i < newsSearch.results.length; i++) { 

      // Create HTML elements for search results 
      var p = document.createElement('p'); 
      var a = document.createElement('a'); 
      a.href = newsSearch.results[i].url; 
      a.innerHTML = newsSearch.results[i].title; 

      // Append search results to the HTML nodes 
      p.appendChild(a); 
      document.body.appendChild(p); 
     } 
     } 
    } 

    function onLoad() { 

     // Create a News Search instance. 
     newsSearch = new google.search.NewsSearch(); 

     // Set searchComplete as the callback function when a search is 
     // complete. The newsSearch object will have results in it. 
     newsSearch.setSearchCompleteCallback(this, searchComplete, null); 

     // Specify search quer(ies) 
     newsSearch.execute('Barack Obama'); 

     // Include the required Google branding 
     google.search.Search.getBranding('branding'); 
    } 

    // Set a callback to call your code when the page loads 
    google.setOnLoadCallback(onLoad); 

    </script> 

Answer 1

Si je comprends bien, voici ce que vous avez besoin:

Créer l'<div> et lui donner une carte d'identité:

<div id="your-div">HERE BE NEWS</div> 

modifiez le funcion comme de searchComplete ceci:

function searchComplete() { 

    var container = document.getElementById('your-div'); 
    container.innerHTML = ''; 

    if (newsSearch.results && newsSearch.results.length > 0) { 
    for (var i = 0; i < newsSearch.results.length; i++) { 

     // Create HTML elements for search results 
     var p = document.createElement('p'); 
     var a = document.createElement('a'); 
     a.href = newsSearch.results[i].url; 
     a.innerHTML = newsSearch.results[i].title; 

     // Append search results to the HTML nodes 
     p.appendChild(a); 
     container.appendChild(p); 
    } 
    } 
} 

En ce qui concerne la manipulation de style, vous pouvez faire correspondre les éléments par l'ID donné dans css. Par exemple comme ceci:

#your-div a { 
    font-weight: bold; 
} 

EDIT:

Pour vous montrer que cela fonctionne, j'ai créé un jsFiddle: http://jsfiddle.net/enjkG/

Il n'y a pas beaucoup de choses que vous pouvez gâcher ici. Je pense que vous pouvez avoir une erreur syntaxique et n'a pas vérifié la console pour les erreurs.