使用javascript输出html

Question

我有一个引用另一个.js文件的javascript链接。 我一直在尝试输出图像（用于测试目的），但我不确定这是什么方法。

    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");
}());

我能够开始提醒，一直到中间。 似乎var links不起作用。 我正在尝试在此.js文件中使用HTML。 基本上，我希望能够做一些模态窗口，但我现在正试图输出图像用于测试目的。

另外，这是jquery的正确方法吗？

提前致谢！

Answer 1

你的代码是一个奇怪的组合。 Jquery代码几乎总是需要在页面加载后运行，而在页面加载后永远不能使用document.write 。

您错误地将jQuery包装在即时执行函数中。 jQuery的正确包装在：

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

或做同样事情的速记版本：

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

如果您将所有document.write更改为$('body').append(/* your content*/)并将所有代码放在上面的包装器中，您将获得更好的成功。

jQuery文档和API中有大量信息。 关于我展示的包装的更多细节的一个良好的起点可以在这里找到： http ： //docs.jquery.com/How_jQuery_Works

Answer 2

在另一个答案中解决了你最大的问题。 您正在不正确地包装JQUery，因此当JQuery到达您的append语句时，它还没有准备好执行。

没有必要将html包装在JQuery对象中（在本例中）：

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

或者干脆：

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

就最佳实践而言，使用append ， appendTo或prepend是很好的选择，具体取决于上下文。 你也可以使用：

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

在一天结束时，您有很多选择，但不惜一切代价避免使用document.write 。 非JQuery方法是将.innerHTML与DOM元素一起使用。 在没有JQuery的情况下，这也是一种很好的方法。