Можно ли добавить элемент в JavaScript nodeList?

Question

Я генерирую контент динамически, поэтому часто получаю documentFragments, который я запрашиваю с помощью querySelectorAll или querySelector, возвращая nodeList элементов внутри моего документа.

Время от времени я хотел бы добавить элемент в список, но я не могу найти что-либо в Интернете о том, возможно ли это.

Я пробовал так:

document.querySelectorAll(".translate").item(length+1) = document.createElement("div"); 

и это:

document.querySelectorAll(".translate").shift(document.createElement("div")); 

Но оба не работают (как и ожидалось)

Вопрос:
Можно вручную добавить элементы в NodeList? Наверное, но не все же спрашиваю.

Спасибо за некоторые идеи?

EDIT:
Так подробнее: Я генерируя блок динамического контента, который я хочу, чтобы добавить к моей странице. По умолчанию блок находится на английском языке. Поскольку пользователь просматривает страницу на китайском языке, я запускаю переводчик на динамическом фрагменте, ПЕРЕД добавлением его в DOM. На моей странице у меня также есть элемент, например название, которое должно изменяться в зависимости от добавляемого динамического содержимого. Моя идея состояла в том, чтобы сделать это за один шаг = попытаться добавить элемент в мой nodeList. Но писать сейчас ... Я предполагаю, что не возможно :-)

Answer 1

В отличии от ранее описанных методов выбора элементов, то NodeList возвращаемого querySelectorAll() не жить: он держит элементы, которые соответствуют селектору в время вызова метода, но оно не обновляется по мере изменения документа . ^[1]

NodeList в этом случае нет в живых, так что если вы добавляете/удалить что-нибудь в/из него, то оно не будет иметь никакого влияния на структуру документа.

NodeList - это объект, похожий только на чтение. ^[1]

^{[1]: JavaScript: Полное Guid, Дэвид Флэнаган}

Answer 2

EDIT: Как уже упоминалось @Sniffer, нодлистов предназначены только для чтения (оба свойства длины и Предметы). Вы можете манипулировать всем остальным о них, как показано ниже, но, вероятно, лучше преобразовать их в массивы, если вы хотите ими манипулировать.

var list = document.querySelectorAll('div'); 
var spans = document.querySelectorAll('span'); 

push(list, spans); 
forEach(list, console.log); // all divs and spans on the page 

function push(list, items) { 
    Array.prototype.push.apply(list, items); 
    list.length_ = list.length; 
    list.length_ += items.length; 
} 

function forEach(list, callback) { 
    for (var i=0; i<list.length_; i++) { 
    callback(list[i]); 
    } 
} 

Это, вероятно, будет лучшей идеей превратить NodeList в массив вместо (list = Array.prototype.slice(list)).

var list = Array.prototype.slice.call(document.querySelectorAll('div')); 
var spans = Array.prototype.slice.call(document.querySelectorAll('span')); 

list.push.apply(list, spans); 
console.log(list); // array with all divs and spans on page 

Answer 3

Чтобы не попасть в тонкости с методами массива иногда это может быть более удобным для чтения, чтобы сделать список имен узлов и цикл над списком.

В этом примере я задаю один и тот же обработчик события для всех кнопок в двух различных групп радиокнопок (где каждая кнопка в группе с таким же именем):

<div> 
    <input type="radio" name="acmode" value="1" checked="checked">Phase<br> 
    <input type="radio" name="acmode" value="2">Ssr<br> 
    <input type="radio" name="acmode" value="3">Relay<br> 
</div> 
<div> 
    <input type="radio" name="powermode" value="0" checked="checked">Manual<br> 
    <input type="radio" name="powermode" value="1">Automatic<br> 
</div> 

Пример обработчика событий:

var evtRbtnHandler = 
    function rbtnHandler() { 
     document.getElementById("response11").innerHTML = this.name + ": " + this.value; 
    } 

и назначая:

var buttongroup = ["acmode", "powermode"]; 
buttongroup.forEach(function (name) { 
    document.getElementsByName(name).forEach(function (elem) { 
     elem.onclick = evtRbtnHandler; 
    }); 
}); 

В любом случае, как только вы получите ваши руки на каждый один элемент может быть нажат() в массив, используя считываемый человеком код.