为什么换行不了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
 
</style>
</head>
<body>
 
<script type="text/javascript" src="D:/demo/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function(){
        var link1=$("<a></a>",{
        text:"baidu",
        href:"http://www.baidu.com",
        target:"_blank",
        title:"goto baidu"
        });
     link1.appendTo("body");
     document.write("<br/>");
        var link2=$("<a>baidu</a>").attr({
        href:"http://www.baidu.com",
        target:"_blank",
        title:"goto baidu"
        });
     link2.appendTo("body");
     })
</script>
</body>
</html>

为什么我在两个appendTo之间加个换行在页面上就只显示一个baidu了？

学东西要快 2017-07-01

源自：jQuery DOM操作 1-1 如何创建 HTML

收起

3回答

樱桃小胖子回答被采纳获得+3积分 2017-07-01 20:35:06

程序自上向下执行，因此执行到document.write("<br/>");句时，直接打印出了换行，覆盖了link1.appendTo("body");另外不是很清楚为啥要换行呢

收起回答

学东西要快提问者 #1

可是打印换行为什么覆盖掉link1.appendTo("body")呢？

2017-07-01 21:06:41
樱桃小胖子回复提问者学东西要快 #2

这个跟js一句的执行顺序有关

2017-07-01 21:25:13
学东西要快提问者 #3

非常感谢！

2017-07-02 12:14:20

阿尔卑斯de秘密 2017-08-14 13:03:14

<script>
    $(function(){
        var link1=$('<a>',{
            text:'baidu',
            href:'http://www.baidu.com',
            target:'_blank',
            title:'go to baidu'
        })
    link1.appendTo('body');
     
    var link2=$('<br/>')
    link2.appendTo('body');
     
    var link3=$('<a>baidu</a>').attr({
            href:'http://www.baidu.com',
            target:'_blank',
            title:'go to baidu'
        });
    link3.appendTo('body');
    })
</script>