2012-06-24 102 views
1

我有一个JavaScript链接引用另一个.js文件。我一直在试图输出一个图像(用于测试目的),但我不确定什么是正确的方式去做这件事。使用javascript输出html

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的正确方法?

在此先感谢!

回答

2

你的代码是一个奇怪的组合。 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

+0

“在加载页面后永远不能使用document.write”。我只是试图在控制台中,看起来像它可以使用,但取代整个页面:) – sabithpocker

+0

@sabithpocker刚好点 – charlietfl

+0

刚刚阅读此,https://developer.mozilla.org/en/document.write它显示了一个例子页面加载后用document.write替换页面。只是好奇你的评论;) – sabithpocker

1

你的最大的问题是解决在其他答案。你不恰当地包装JQUery,所以基本上JQuery在它到达append声明时还没有准备好执行。

是不必要的包装在一个jQuery对象的HTML(在这种情况下):

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

在最佳实践方面,采用appendappendToprepend根据具体情况是很好的选择。你也可以使用:

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

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

+0

实际上没有错误,如果你想在附加前附加事件或数据,在jQuery中包装'links' html。我意识到这不是OP所做的,在他的情况下是额外的函数调用...但它的工作原理完全相同 – charlietfl

+0

您的权利,问题是您如何不正确地包装JQuery代码,我将编辑我的文章。 – marteljn

+0

而对于语法警察,我注意到我的你 - 你使用错误,以至于迟来做一个编辑。 – marteljn