Установка атрибута дочернего элемента <div> внутри клонированного узла

Question

Я клонировал узел, но я хочу установить или изменить атрибут div внутри этого клонированного узла, в частности, изменить id из div id="test0"

Я не могу найти какую-либо документацию по этому вопросу, какие-нибудь прямые ребята из JavaScript знают решение?

var c = document.getElementById("stone-opt0"),
cloned = c.cloneNode(true);

//CODE THAT DOESN'T WORK
cloned.getElementById("test0").id = "new-id";

Что я делаю, так это перебираю большой список элементов и помещаю эти элементы во фрагмент документа, который я затем нажимаю на страницу один раз... Я делаю это вместо добавления каждого элемента на страницу, а затем изменяю после прикрепления в DOM (что будет быстрее, нет?)

Answer 1

Вы пытаетесь позвонить getElementById в контексте узла элемента. Это невозможно: getElementById метод существует только на document узел (потому что id значения должны быть уникальными для документа). Напротив, вы можете сделать getElementsByTagName или же querySelectorAll основанный на контексте элемента.

Поэтому вы можете использовать querySelectorAll способ сделать это, если вы не против не поддерживать браузеры, которые не поддерживают этот метод, например, IE8.

cloned.querySelectorAll('[id="test0"]')[0].id = "new-id";

Answer 2

Вы пытались делать cloned.getElementById("test0").id = "new-id" после прикрепления cloned в ДОМ? getElementById() может быть привередливым, если вы ищете что-то, что не является частью DOM. И когда я говорю "привередливые", я имею в виду "в общем, не работает".

Вы можете попробовать создать скрытый элемент (например, <div style="display:none">) на странице и прикрепление cloned чтобы он не появлялся на странице, пока вы не будете готовы.