Question

我发现可以使用JavaScript代码加入jQuery移动应用here并对其进行一些小修改。

由于我对JavaScript很陌生 - 目前在codeacademy.com的JavaScript课程开始时 - 我没有意识到document.write不是输出/构建HTML的最佳方式。

加载.js文件时，它就像一个空白页面，我认为是document.write。刷新时，RSS源正确显示。我很难确定需要使用哪些代码来替换document.write部分。

我见过document.getElementById('div1').innerHTML='test'但不太确定如何使用它来替换下面代码中的document.write。

如果有人在JSON代码之前的下面一节中提供document.write的替代代码，我将非常感激。

/* configuration */
var maxLength = 10;

/* writing HTML */
document.write(
/* page begins */
  '<div id="news" data-role="page" data-theme="a" data-title="NEWS">' +
  '  <div data-role="content">' +
  '    <ul data-role="listview" data-filter="true" id="dynamiclist" data-inset="true">'
);
for (var i=1; i<=maxLength; i++){
  document.write(
    '<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>'
  );
}
document.write(
  '    </ul>' +
  '  </div>' +
  '</div>'
);
for (i=1; i<=maxLength; i++){
  document.write(
    '<div data-role="page" id="article' + i + '">' +
    '  <div data-role="content">' +
    '  <h3 id="articleHeader' + i + '">&nbsp;</h3>' +
    '    <div id="articleContent' + i + '" class="articleContent">' +
    '    <p id="articleDate' + i + '" class="articleDate"></p></div>' +
    '    <div data-role="controlgroup" data-type="horizontal">' +
'      <a href="news.html" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-grid ui-btn-inline">News</a>' +
    '      <a href="#article' + String(i-1) + '" data-role="button" data-icon="arrow-l"' +
    '        data-inline="true" class="prevButton">Prev</a>' +
    '      <a href="#article' + String(i+1) + '" data-role="button" data-icon="arrow-r"' +
    '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' +
    '    </div>' +
    '  </div>' +
    '</div>'
  );
}
/* JSONP */
$(function(){
  getOnlineFeed('http://rss.cnn.com/rss/money_news_economy.rss');
});
/* functions */
var getOnlineFeed = function(url) {
  var script = document.createElement('script');
  script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q='
                  + encodeURIComponent(url)
                  + '&v=1.0&num=' + maxLength);
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
  var script = document.createElement('script');
  script.setAttribute('src', url);
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
};
var listEntries = function(json) {
  if (!json.responseData.feed.entries) return false;
  $('#widgetTitle').text(json.responseData.feed.title);
  var articleLength =json.responseData.feed.entries.length;
  articleLength = (articleLength > maxLength) ? maxLength : articleLength;
  for (var i = 1; i <= articleLength ; i++) {
    var entry = json.responseData.feed.entries[i-1];
    $('#link' + i).text(entry.title);
    $('#articleDate' + i).text(entry.pubdate);
    $('#articleHeader' + i).text(entry.title);
    $('#openButton' + i).attr('href', entry.link);
    $('#articleContent' + i).append(entry.content);
  }
  $('#article1 .prevButton').remove();
  $('#article' + articleLength + ' .nextButton').remove();
  if (articleLength < maxLength) {
    for (i = articleLength + 1; i <= maxLength; i++) {
      $('#list' + i).remove();
      $('#article' + i).remove();
    }
  }
};
$('#PageRefresh').click(function() { 
       location.reload();
    });

Answer 1

编辑：我第一次没有仔细阅读这个问题 - 我现在看到你已经在使用jQuery了，但是在你进行DOM操作之前没有。所以答案的其余部分 - 使用.html（）并在文档准备好后才操作DOM。

这是我的建议。完全免责声明：这不是唯一的方法，也不一定是最好的＆＃34;这样做的方式。不过，我敢说它是最常用的方式。

使用jQuery - 它将使您的生活变得更加轻松。 http://jquery.com
确保你做DOM（文档对象模型）操作（在文档中插入HTML元素是一种DOM操作，虽然我不确定document.write（）是否在其之后）准备好了。 jQuery提供了一个很好的方法来做到这一点。 http://api.jquery.com/ready/
```
$(function() {
    // Handler for .ready() called
});
```
使用jQuery中的.html()函数写入您的<body>元素或直接在HTML文件中编写的<div>元素。 http://api.jquery.com/html/

HTML

<html>
    <body>
        <div id="content"></div>
    </body>
</html>

的jQuery

var page = "This should have the HTML you want to insert";
$(function() {
    $("#content").html(page);
});

在JavaScript中编写HTML比使用document.write更好的方法是什么？

1 个答案: