jQuery .html()VS innerHTML() [英] jquery .html() VS innerHTML()

问题描述

这里的人们建议我使用jQuery，但是当我将代码更改为jQuery并使用.html()时，就像没有执行任何操作一样.我什至删除了需要添加的一半html代码，因为有人建议我向大多数innerHTML和HTML提问.

People on here are recommending that I use jQuery, but when I changed the code to jQuery and used .html() it is like it did nothing. I even removed half of the html code that needed to be added as someone suggested I was asking way to much of innerHTML and HTML.

在简单任务"中，我所需要的只是当用户单击运行onClick事件的DIV时.

In Simple task, all I want is for when a user click on the DIV that it runs the onClick event.

 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

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

The problem I have is relating to the following code.

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>";


    }
}

您会在此区域看到一个链接

you will see in this area i have a link

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

它应该开枪

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

但我没有得到那场大火.

but I am not getting that fire.

是的，这是一个适用于iOS和Cordova的网络应用程序，但我认为这是一个JavaScript问题.

Yes this is a web app for iOS and Cordova but I believe this is a javascript issue.

推荐答案

如果您的结构看起来像

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

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

and you want each div.news to by dynamic and clickable, you could do that like this with jQuery

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

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

And if you want to append divs to your #activecontent with an ajax request. Let's assume your JSON looks like

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

您要加载的JavaScript看起来像

Your javascript to load that could look like

$.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，在那里做的是将事件侦听器绑定到您的父div #activecontent.我们这样做是因为它始终存在于您的页面中.您将根据您的AJAX调用在该容器中添加div或从其中删除div，因此不必绑定一个点击(或为每个div内联一些javascript)，您只需将其绑定到父对象一次，然后将该点击委托给' .消息'.您也可以将点击绑定到每个新的div，但是委派更干净.

---

Now to explain. The first piece of javascript with the .on, what were doing there is binding an event listener to your parent div, #activecontent. We do that because it will always exist in your page. You will be adding and maybe removing divs from that container based on your AJAX call, so instead of having to bind a click (or inline some javascript for every div), you can bind once to the parent, and then delegate that click to '.news'. You can alternatively bind the click to each new div, but delegating is cleaner.

关于加载和编写JSON的部分.如果要在节点的innerHTML中添加一些内容，则jQuery的方法是使用.append().这只是诸如此类的快捷方式

As for the part about loading the JSON and writing it. If you are going to add some stuff to a node's innerHTML, the jQuery way is to use .append(). It's just a shortcut to something like

//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会为您进行排序.

Hopefully this clears things up for you. If you are just jumping into jQuery, know that it's not always that it's faster to write than the vanilla javascript, but rather that when you do something like ..html('new stuff');, it's going to use a method that works best with all browsers. So if there's some rogue version of IE out there than wants to use .innerHTMLmsIsNeat instead of .innerHTML, jQuery will sort that for you.

这篇关于jQuery .html()VS innerHTML()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！