jquery .html() VS innerHTML()

Question

这里的人建议我使用 jQuery，但是当我将代码更改为 jQuery 并使用 .html() 时，它就像什么也没做一样。我什至删除了一半需要添加的 html 代码，因为有人建议我在询问大部分 innerHTML 和 HTML。

在简单任务中，我想要的只是当用户单击它运行 onClick 事件的 DIV 时。

 html += "<div onClick='loadnewsstory();' class='news'> this is a test story, for this test story we are not getting data from JSON</div>";

我都试过了

$("#activecontent").html(html);
document.getElementById("activecontent").innerHTML

我遇到的问题与以下代码有关。

function newsstories()
{
    document.getElementById("activecontent").innerHTML = "<h1 class='newsheader'>Latest News</h1>";

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","http://test.com/?uri=loadnews",false);
    xmlhttp.send();

    var newsreponse = JSON.parse(xmlhttp.responseText);



    for (var i = 0, len = newsreponse.length; i < len; ++i) {
     var news = newsreponse[i];
     if(i % 2 == 0){
       cssclass = "even";
     }
     else
     {
       cssclass = "odd";
     }

      //  alert(news.featured_image);
     document.getElementById("activecontent").innerHTML = document.getElementById("activecontent").innerHTML + "<div class='news " + cssclass + "'><div class='newstitle'><div class='newstitlecolor' id='news_"+ countstory+"'><a href='javascript:loadnewsstory();'>" + news.post_title + "</a></div></div><div class='base' style='background: url('" + news.featured_image + "');'><img src='" + news.featured_image + "'  style='width:100%; height:100%;'/></div></div>";


    }
}

你会在这个区域看到我有一个链接

<a href='javascript:loadnewsstory();'>" + news.post_title + "</a>

它应该开火

function loadnewsstory()
{
    navigator.notification.alert(device.uuid);
}

但我不会着火。

是的，这是一个适用于 iOS 和 Cordova 的网络应用，但我认为这是一个 javascript 问题。

Answer 1

不要使用+=，因为它用于不正确的实例并返回“意外令牌”错误，因为var html 以前不等于任何值。我删除了它，它似乎解决了这个问题。 Fiddle

如果你必须使用+=设置var html = $("#activecontent").html()，那么你可以在重新定义变量时使用+=（Fiddle 2）

Answer 2

如果你的结构看起来像

html

<div id="activecontent">
  <div class='news'>Story 1</div>
  <div class='news'>Story 2</div>
</div>

并且您希望每个 div.news 都是动态且可点击的，您可以使用 jQuery 这样做

javascript

$(function(){
  $("#activecontent").on('click', '.news', function(){
     //You clicked the div 
     console.log( 'Clicked', $(this) );
  });
});

如果您想通过 ajax 请求将 div 附加到您的 #activecontent。假设您的 JSON 看起来像

json

[
  { "id": 1, "content": "My first story" },
  { "id": 2, "content": "Another one" },
  { "id": 3, "content": "Last story" }
]

您要加载的 javascript 可能看起来像

javascript

$.getJSON( "http://url_of_json.json", function(result){
   for(var i in result){
      $("#activecontent").append( $("<div>").addClass('news').html(result[i].content) );
   }
});

在 DOM 上更快的 ajax 替代 javascript

$.getJSON( "http://url_of_json.json", function(result){
   var newHtml = "";
   for(var i in result){
     newHtml += "<div class='news'>" + result[i].content + "</div>";
   }
   $("#activecontent").append( newHtml );
   // Or $("#activecontent").html( newHtml );
   // if you want to replace what the page loaded with
});

---

现在解释一下。第一段带有.on 的javascript，在那里做的是绑定一个事件监听器到你的父div，#activecontent。我们这样做是因为它始终存在于您的页面中。您将根据您的 AJAX 调用从该容器中添加或删除 div，因此不必绑定单击（或为每个 div 内联一些 javascript），您可以绑定一次到父级，然后将该单击委托给“ 。消息'。您也可以将点击绑定到每个新 div，但委派更简洁。

关于加载 JSON 并编写它的部分。如果你要向节点的 innerHTML 添加一些东西，jQuery 方法是使用.append()。这只是通向类似

的捷径

//vanilla js way
var e = document.getElementById('myThing');
e.innerHTML = e.innerHTML + "Thing I want to append";
// vs jQuery way
$("#myThing").append("Thing I want to append");

//To continue this example, to replace your myThing's html
//vanilla
e.innerHTML = "my new html";
//jQuery
$("#myThing").html("my new html");

希望这可以为您解决问题。如果您只是跳入 jQuery，请知道它并不总是比普通 javascript 更快，而是当您执行 ..html('new stuff'); 之类的操作时，它将使用最适合所有浏览器的方法。因此，如果有一些流氓版本的 IE 想要使用 .innerHTMLmsIsNeat 而不是 .innerHTML，jQuery 会为您排序。