Question

我正在尝试使用div设置HTML的属性，并且它会抛出一个错误，说明＆＃34;无法设置属性＆＃39; innerHTML＆＃39; null。

在JavaScript中，

function find_person() {

    ...

    var title = 
    "<div class=\"w3-container\">" +
    "<h3>Find a person</h3>";
    "</div>";

    document.getElementById("content_title").innerHTML = title;
}

在HTML中，

<div id="content" class="w3-display-container w3-container">
    <div id = "content_title" class = "w3-row" >Title goes here
    </div>
    <div id= "content_main" class = "w3-row">
    </div>
</div>

你能帮我弄清楚识别div的错误是什么原因吗？

Answer 1

当您尝试访问时，“content_title”div为空。

当您在其上调用您的功能时，文档很可能没有完全加载。

Answer 2

您要添加的HTML内容的初始化代码已损坏：

var title = 
"<div class=\"w3-container\">" +
"<h3>Find a person</h3>" + // <----- "+" instead of ";"
"</div>";

实际上，您正在尝试附加一个不完整的 HTML块，因此浏览器会忽略它。

Answer 3

确保在html中，将“脚本”标记放在您正在寻找的任何位置，或者在结束标记下一直保持最佳状态。当javascript从其父文件夹中请求id和/或类进行操作时，它从顶部到初始化的位置不在下面。：d

Answer 4

它与jQuery库的简单（如果你需要纯js请在标题中澄清）

html代码：

<a href="#" class="specific-button">button</a>

js code：

function find_person(){
   var title = '<div class="w3-container">'+
                  '<h3>Find a person</h3>'+
                '</div>';

   jQuery("#content_title").html(title);
}

jQuery(document).ready(function(){
    jQuery('a.specific-button').on('click', function(e){
        e.preventDefault();// this will prevent button to refresh the page
        find_person();
    });

});

并考虑您应该在javascript中以这种方式拆分字符串：

var sample = 'first part'+
'second part'+
'third and last part';

分号只是最后一部分。

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39; null []即使div存在

4 个答案: