en utilisant javascript pour afficher html

Question

J'ai un lien javascript qui fait référence à un autre fichier .js. J'ai essayé de sortir une image (à des fins de test), mais je ne suis pas sûr de la bonne façon de procéder.

alert("beginning"); 
    //var link = $("<a href='http://juixe.com'>Hello, <b>World</b>!</a>"); 
    //$('body').append(link); 
    //document.write("hi"); 
    //document.write("<div><img src='http://s3-media2.ak.yelpcdn.com/bphoto/xqC6Iy5mOLb_8mwMKGv8_w/l.jpg' /></div>"); 
    alert("before function"); 
(function(){ 



    alert("middle"); 
    var links = $("<a href='http://juixe.com'>Hello, <b>World</b>!</a>"); 
    $('body').append(links); 
    alert("after middle"); 
    //alert($("img").attr("id")); 
    document.write("hi"); 
    document.write("<div><img src='http://s3-media2.ak.yelpcdn.com/bphoto/xqC6Iy5mOLb_8mwMKGv8_w/l.jpg' /></div>"); 

    alert("end"); 
}()); 

J'ai été en mesure d'alerter début, tout au milieu. Il semble que var links ne fonctionne pas. J'essaie d'utiliser HTML dans ce fichier .js. Essentiellement, je veux être en mesure de faire une fenêtre modale, mais j'essaie de produire des images à des fins de test dès maintenant.

Aussi, est-ce la bonne façon pour jquery?

Merci d'avance!

Answer 1

Votre code est un mélange étrange. Le code Jquery doit presque toujours être exécuté une fois la page chargée, tandis que document.write ne peut jamais être utilisé après le chargement de la page.

Vous encapsulez incorrectement votre jQuery dans une fonction d'exécution immédiate. L'enveloppe appropriée pour jQuery est dans:

$(document).ready(function(){ 
    /* html of page exists now, run jQuery here */ 
});// notice no extra "()" after close brace as you have 

ou la version abrégée qui fait même chose:

$(function(){ 
    /*html of page exists now, run jQuery here */ 
});// notice no extra "()" after close brace as you have 

Si vous changez tous vos document.write-$('body').append(/* your content*/) et placez tout votre code à l'intérieur des emballages ci-dessus vous aura beaucoup mieux le succès.

La documentation et l'API de jQuery regorgent d'informations. Un bon point de départ avec plus de détails sur l'emballage que j'ai montré peut être trouvé ici: http://docs.jquery.com/How_jQuery_Works

Answer 2

Votre plus gros problème est abordé dans l'autre réponse. Vous encapsulez incorrectement JQUery de sorte que JQuery n'est essentiellement pas prêt à être exécuté lorsqu'il atteint votre instruction append.

Il est inutile d'envelopper votre code html dans un objet JQuery (dans ce cas):

var links = "<a href='http://juixe.com'>Hello, <b>World</b>!</a>"; 
$('body').append(links); 

ou simplement:

$('body').append("<a href='http://juixe.com'>Hello, <b>World</b>!</a>"); 

En termes de meilleures pratiques, en utilisant append, appendTo ou prepend sont de bonnes options en fonction du contexte. Vous pouvez également utiliser:

$("body").html("/*Your HTML here*/") 

A la fin de la journée, vous avez beaucoup d'options mais il faut éviter document.write à tout prix. L'approche non-JQuery serait d'utiliser .innerHTML avec un élément DOM. C'est aussi une bonne approche en l'absence de JQuery.