Question

在尝试在页面中添加内容时，我遇到了一些麻烦。

<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>

所以我试图使用那段代码并且它不起作用

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

然后尝试了这个

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};
};

..通过给我：它变得更糟：

未捕获的TypeError：对象＃没有方法'getElementById'

误差

为什么会这样？

BR，Stephan

Answer 1

使用jQuery，你可以像这样使用html（）函数：

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

Answer 2

在内容div中添加数据：

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

您的第二次尝试失败的原因是您将getElementById（）应用于前一个“getElementById（）”的结果。

Answer 3

在您的第一个Javascript代码中，您混合了DOM方法和jQuery代码的概念。请尝试以下代码

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

不同之处在于，而不是

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

您应该使用

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

Answer 4

与Vincent达成一致，其原因在于，当您使用jQuery函数$时，您不会获得DOM元素，而是获得一个表示您所选内容的jQuery对象。有几种方法可以做到这一点，其中一个是@ vincent-ramdhanie已经提到的。如果你想获得实际的DOM元素，你可以这样做：

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

或者这个：

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

请记住：innerHTML是DOM元素的属性，而不是jQuery对象。

添加内容问题

4 个答案: