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之前不等于任何值。 我删除了它，似乎可以解决问题。 小提琴

如果必须使用+= set var html = $("#activecontent").html() ，则在重新定义变量后，可以使用+= （ 小提琴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) );
   }
});

ajax的替代javascript，在DOM上更快

$.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，在.on做的是将事件监听器绑定到您的父div #activecontent 。 我们这样做是因为它始终存在于您的页面中。 您将根据您的AJAX调用在该容器中添加div或从其中删除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会为您进行排序。