Ошибка в appendChild - Была сделана попытка ссылаться на узел в контексте, где он не существует

-2

По какой причине это не работает? Кажется достаточно простым. Я получаю эту ошибку в консоли. Я пытаюсь заполнить неупорядоченный список, используя значения из массива.Ошибка в appendChild - Была сделана попытка ссылаться на узел в контексте, где он не существует

HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="intro.js"></script> 
    </head> 

    <body> 
     <div id="container"> 
      <div id="main"> 
       <ul id="menu"></ul> 
      </div> 
     </div> 
    </body> 
</html>

JS:

var container = document.getElementById("container"); 
var menuItems = ["Home","About","Contact Us", "Sign in"]; 

$(document).ready(function(){ 
    console.log("Populating menu"); 
    var elem = document.getElementById('menu'); 

    for(var i=0;i<menuItems.length;i++){ 

     elem.appendChild("<li id='" + menuItems[i] + "'>" + menuItems[i] + "</li>");  
    } 
    console.log('menu populated.'); 
});

источник

2013-12-11 Batman

Что 'container' используется? Почему он выбирается вне 'ready'? – Bergi

NO причина. Просто подумал, что я буду использовать его в какой-то момент, чтобы схватить его. – Batman

* Что * не работает? Пожалуйста, укажите свою проблему явно. Является ли ваш вопрос заголовком своего рода сообщение об ошибке? Если да, то где это произошло? – Bergi

Палка с JQuery, appendChild не принимает строки, только узлы

$(document).ready(function(){ 
    var container = $("#container"), 
     elem  = $('#menu'), 
     menuItems = ["Home", "About", "Contact Us", "Sign in"]; 

    $.each(menuItems, function(idx, item) { 
     $('<li />', { 
      id : item.replace(/\s+/,'_'), // no spaces here 
      text : item 
     }).appendTo(elem); 
    }); 
});

источник

2013-12-11 21:46:43 adeneo

Я видел этот формат раньше, не могли бы вы объяснить, что здесь происходит, или у этого типа функции есть имя, которое я мог бы найти. Например, для чего нужен «idx»? – Batman

idx - всего лишь короткая версия индекса, это индекс цикла. Это все в документации -> [создание элемента] (http://api.jquery.com/jQuery/#creating-new-elements) | [jQuery.each] (http://api.jquery.com/jQuery.each/) – adeneo

Что происходит с регулярным выражением? Не могу ли я сделать что-то вроде menuItems [idx]? – Batman

Если вы хотите придерживаться 100% JavaScript, используйте document.createElement("li")

Here's a jsfiddle

var ul = document.getElementById("myID") 
for (var i = 0; i < 10; i++){ 
    var li = document.createElement("li"); 
    li.setAttribute("id", "myLI" + i); 
    li.innerText = "Hello " + i 
    ul.appendChild(li) 
}

источник

2013-12-11 21:56:56

Зачем использовать 'li.setAttribute (" id "," myLI "+ i);' когда 'li.id =" myLI "+ i;' более прямой? – jfriend00

innerText не является перекрестным браузером – adeneo

yep ... используйте стандартный 'textContent' (ie9 +) или создайте новый текстовый узел или просто используйте innerHTML. –

Ошибка в appendChild - Была сделана попытка ссылаться на узел в контексте, где он не существует

ответ

Смежные вопросы