有什么比用JavaScript编写document.write更好的HTML编写方法？

Question

我在这里找到了可工作的JavaScript代码，并将其输入到jQuery移动应用程序中，并对它做了一些小的修改。

由于我对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。

这是我的建议。 完全免责声明：这不是唯一的方法，也不一定是“最佳”方法。 我敢说这将是最常见的方法。

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

问题描述

1 个解决方案

解决方案1
0 2014-05-07 21:57:59

有什么比用JavaScript编写document.write更好的HTML编写方法？

问题描述

1 个解决方案

解决方案1 0 2014-05-07 21:57:59

解决方案1
0 2014-05-07 21:57:59