CODEWITHSUNDEEP
javascriptjquery
kidwon
kidwon

Reputation: 4524

adding content problem

Here I've got some trouble trying to add content in a page.

<body>      
    <div id="wrapper">
        <div id="nav">
            <ul>
                <li><a href="#"><span>exercizeI</span></a></li>
                <li><a href="#"><span>exercizeII</span></a></li>
                <li><a href="#"><span>........</span></a></li>
                <li><a href="#"><span>........</span></a></li>
            </ul>
        </div>
        <div id="content"></div>
    </div>
  </body>

So I'be tried to use that piece of code and it didn't work

var table1='<table>..some content..</table>}';
$('#nav li a:eq(1)').click(function (){$('#content').innerHTML='habarlaaaa';});

then tried this one

function press(){
 var but = document.getElementById('wrapper').getElementById('nav').getElementsByTagName('ul')[0].getElementsByTagName('li')[1].getElementsByTagName('a')[0];
 var table1='<table>..some content..</table>}';
 var content = document.getElementById('wrapper').getElementById('content');
 but.onclick=function(){content.innerHTML=table1};
};

..and it became even worse by giving me:

Uncaught TypeError: Object # has no method 'getElementById'

error

Why is this happening?

BR, Stephan

Upvotes: 2

Views: 1311

Answers (4)

Groovetrain
Groovetrain

Reputation: 3325

Agreed with Vincent, the reasoning is that when you use the jQuery function, $, you don't get a DOM element, but rather you get a jQuery object representing what you've selected. There are a couple ways of doing this, one of which @vincent-ramdhanie has already mentioned. If you want to get at the actual DOM element, you can do either this:

$('#content')[0].innerHTML='habarlaaaa';

or this:

$('#content').get(0).innerHTML='habarlaaaa';

remember: innerHTML is a property of a DOM element, not a jQuery object.

Upvotes: 1

Nikhil
Nikhil

Reputation: 3384

In your first Javascript code you were mixing concepts of DOM methods and jQuery code. Please try the following code

$('#nav li a:eq(1)').click(function (){$('#content').eq(0).html('habarlaaaa');});

the difference is that instead of 

$('#content').innerHTML = '......';

You should have used

.eq(0).html('habarlaaaa')

Upvotes: 1

Sylver
Sylver

Reputation: 8967

To add data inside the content div:

$('#content').append("data");

The reason why your second try fails is because you are applying getElementById() to the result of the previous "getElementById()".

Upvotes: 2

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

Using jQuery you can use the html() function like this:

 $('#nav li a:eq(1)').click(function (){$('#content').html(table1);});

Upvotes: 3

Related Questions