javascript - how to open a page on a div tag from another div tag?

I'm a beginner in html and javascript. I created a link in #top_Bar. when I click on the link I want the page to load on the #All_songlist. but all I see in #All_songlist is just this two words "music.html" not the content of "music.html". where did I go wrong? I am a bit confused about what does the innerHTML do. I want to do it without useing < iframe > tag.

<div id="top_Bar">
     <a href=" file:///F:/music.html"  onclick="load_songlist()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>

code on the javascript is:

 function load_songlist(){
          document.getElementById("All_songlist").innerHTML="music.html";
 }

<div id="top_Bar">
     <a href=" file:///F:/music.html"  onclick="load_songlist()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>

code on the javascript is:

 function load_songlist(){
          document.getElementById("All_songlist").innerHTML="music.html";
 }

Share Improve this question edited Jul 2, 2013 at 22:06 asked Jul 2, 2013 at 21:50 Giliweed 5,1778 gold badges30 silver badges35 bronze badges

1 innerHTML literally writes that to the output so onclick you would have <div id="All_songlist">music.html</div> – redditor Commented Jul 2, 2013 at 21:54
You'll need to perform an AJAX request to load the contents of music.html and then insert that. Do a little research into AJAX. – Jivings Commented Jul 2, 2013 at 21:55
putting the html file inside the div tag is not working @redditor – Giliweed Commented Jul 2, 2013 at 22:03
I edited the link. the page opens fine on another tab. but this is not the problem. I want the page to open on the #all_songlist div tag. – Giliweed Commented Jul 2, 2013 at 22:09
@Giliweed haha I wasn't providing a solution, merely menting on what innerHTML is. Check out Matthew D Auld's answer - its the best way, you should mark is correct. If you still don't understand it, there are many examples on google. – redditor Commented Jul 2, 2013 at 22:26

| Show 3 more ments

4 Answers 4

Sorted by: Reset to default 5

This would be easy using the jQuery library. Use jQuery’s load() function:

function load_songlist(){
    $('#All_songlist').load('music.html');
}

To add the jQuery library to your current page, add the code below to your <head>:

<script src="http://code.jquery./jquery-1.9.1.js"></script>

As Matthew D Auld answered, you should use jQuery's load() function.

As you have had trouble understanding this in practice I have prepared a JSfiddle for you, click here.

To use jQuery, you simply need to include a link in your <head> section. Then you have a script which says:

$(window).load(function(){ Do this function when the page loads.
$("#SongListLink").click(function() { When the user clicks on something with the ID SongListLink, do this function.
$('#All_songlist') .load('music.html'); Populate the DIV with the ID All_songlist with the content from music.html

You finished code should look something like this:

<head>
<script type='text/javascript' src='//code.jquery./jquery-1.10.1.js'></script>
<script type='text/javascript'>
$(window).load(function(){
$(function() {
    $("#SongListLink").click(function() {
        $('#All_songlist')
           .load('music.html');
    });
});
});
</script>
</head>

<body>

<div id="top_Bar">
     <a href="#" id="SongListLink">SONG LIST</a> 
</div>

<div id="All_songlist"></div>

</body>

you can try something like this

url = "music.html"
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4){
 document.getElementById("All_songlist").innerHTML= xhr.responseText
}
}
xhr.send();

Try an ajax request:

function doAjax()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {//IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {//IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          document.getElementById("All_songlist").innerHTML=xmlhttp.responseText;
      }
  }
  xmlhttp.open("GET","music.html",true);
  xmlhttp.send();
}

Markup:

<div id="top_Bar">
     <a href="music.html"  onclick="doAjax()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to open a page on a div tag from another div tag? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)