div 내의 Google 뉴스 박스

Question

내 사이트의 div 내에 Google 뉴스 검색을 추가하려고합니다. 현재 Google에서 제공하는 스크립트를 사용하고 있지만 Ajax/JavaScript의 초보자입니다. Google 뉴스에서 가장 최근의 이야기를 표시 할 수 있지만 div로 혼자서 CSS로 스타일을 수정하는 방법을 알지 못합니다. 아래 코드는 제가 사용하고있는 코드입니다. 어떤 도움이라도 대단히 감사하겠습니다!

가 <div>을 만들고에게 ID 제공 :

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

다음이 같은 searchComplete의 funcion을 수정

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

을

<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

만약 내가 제대로 이해하고

, 이것은 당신이 필요하다

스타일 조작의 경우 CSS에서 주어진 ID로 요소를 일치시킬 수 있습니다. 이 같은 예를 들어

는

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

편집 :

이는 내가 jsfiddle을 만든, 작동하고 있음을 표시하려면 http://jsfiddle.net/enjkG/

여기에 엉망으로 할 수있는 일이 많이 없습니다. 난 당신이 구문 오류가있을 수 있으며 오류에 대한 콘솔을 확인하지 않았 생각합니다.