【问题标题】:Error message Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'错误消息无法在“节点”上执行“appendChild”:参数 1 不是“节点”类型
【发布时间】:2019-05-20 23:14:22
【问题描述】:

我正在尝试使用 ajax 填充我的 jquery 移动列表视图,以通过使用 json 中的数据执行 php Mysql 查询来获取我的电影标题列表。 我成功地以正确的 json 格式获得了数据,但是在我的 javascript 中,我得到了在线错误.... li.appendChild("a")

HTML 
<div data-role="main"  class="ui-content">
         <ul data-role="listview" id="list" >
         </ul >
</div>
getcatagories2_mobile.php

<?php

include("includes/connection.php");

$q="Comedy";

$resultActor = mysqli_query($con,"SELECT id,title, plot,catagory,release_date,rated FROM ".TBL_DATA." WHERE catagory LIKE '%".$q."%' ORDER BY title  ");    

$x= array();

    while($rowMovie = mysqli_fetch_array($resultActor)) {
        $x[]= array("Category" => $rowMovie['title']);

        }
       $jsonarray=json_encode($x);
       echo $jsonarray;

?>
successful sample JSON format output

[{"Category":"22 Jump Street"},{"Category":"27 Dresses"}]
my called javascript function using ajax...

var xhr = new XMLHttpRequest();

        xhr.open("GET", "getcatagories2_mobile.php", true); 

            xhr.onreadystatechange = function() 
            {
                if (xhr.readyState == 4 && xhr.status == 200) 
                {
                  var list = document.getElementById("list");
                  var data= xhr.responseText;
                  var vec= JSON.parse(data);
                        vec.forEach(
                              function(ob)
                              {
                                  var li = document.createElement("li");
                                  var a = document.createElement("a");
                                  var text = document.createTextNode("ob.Category");
                                  a.appendChild(text);
                                  a.setAttribute("href","#");
                                  li.appendChild("a");
                                  list.appendChild("li");

                              }
                         ); 
            $('#list').listview('refresh');  

            }
         }
                      xhr.send();


    };

当我使用 google debug 时,我在 line-> li.appendChild("a") 上遇到错误,当我将鼠标悬停在 var vec= JSON.parse(data) 上时,数据显示正确。

我想要实现的只是让我的 jquery mobile 像这样执行

<div data-role="main"  class="ui-content">
         <ul data-role="listview" id="list" >

            <li><a href="#">22 Jump Street</a></li>
            <li><a href="#">27 Dresses</a></li>

         </ul >
</div>

【问题讨论】:

  • 通过在循环外附加到 DOM 会快很多。只需将列表项连接为文本,然后一次性执行$('#list').append(html).listview('refresh'); 之类的操作。
  • 感谢您的回复,但我不明白“附加到循环外的 DOM。只需将您的列表项连接为文本”我不是专家 :(
  • 好的,我会努力解决这个问题的,谢谢

标签: javascript php jquery-mobile


【解决方案1】:

您应该从 appendChild 调用中删除引号,否则您将字符串传递给该函数,而它不知道如何处理。没有引号,您将对象引用传递给函数。

li.appendChild(a);
list.appendChild(li);

【讨论】:

  • 太棒了,我必须按照您的建议删除“ob.Category”上的引号。我现在确实得到了列表,除了我没有得到那个 jquerymobile 样式列表,这里有什么我遗漏的吗?
  • 是的,您错过了引号中的任何内容都是字符串的知识。
  • 我的列表看起来不像 Jquery mobile 的风格......就像这个demos.jquerymobile.com/1.4.3/listview
猜你喜欢
  • 2015-01-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-01
  • 2018-01-26
  • 2021-02-19
  • 2019-07-14
相关资源
最近更新 更多