Javascript-форум - Пользовательский элемент в select

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Пользовательский элемент в select (https://javascript.ru/forum/events/40853-polzovatelskijj-ehlement-v-select.html)

Пользовательский элемент в select

Есть код вида

<td id="id1" class="class1"><select size="1" style="width: 100%;"><option value="Текст">Текст</option>
...
</select></td>

В него необходимо добавить свой тег option с такими же атрибутами, только другими значениями.
Также очень желательно удалить существующие теги option.

Чтобы было совсем понятно, покажу сразу "на пальцах":
Есть часть кода:

<td id="id1" class="class1"><select size="1" style="width: 100%;">
<option value="Текст">Текст</option>
<option value="Текст2">Текст2</option>
<option value="Текст3">Текст3</option>
<option value="Текст4">Текст4</option>
<option value="Текст5">Текст5</option>
</select></td>

Необходимо сделать при помощи скриптов следующее:

<td id="id1" class="class1"><select size="1" style="width: 100%;">
<option value="Текст">Текст</option>
<option value="Свой текст2">Свой текст2</option>
<option value="Свой текст3">Свой текст3</option>
<option value="Свой текст4">Свой текст4</option>
</select></td>

Эта часть кода находится на стороннем сайте, его необходимо заменить на собственный при помощи расширения.
В общем, очень надеюсь на помощь, ибо я больше ничего не могу придумать. Самое похожее, что смог найти, это: http://javascript.ru/tutorial/dom/mo...nkretnoe-mesto
Именно "Добавление в конкретное место" как раз то, что нужно, только переделать для своих нужд у меня не получилось.
Надеюсь правильный раздел выбрал...
Заранее спасибо за помощь.

var select = document.querySelector('#id1 select');
var text = ['Текст', 'Свой текст2', 'Свой текст3'];
for (var i = 0, option; option = select.options[i]; i++) {
    option.textContent = option.value = text[i];
}

Эх, почти то, только забыл указать, что значение атрибута должно быть отличным от содержимого тега option.

В общем, если можно ещё, то надо из этого:

<td id="id1" style="" class="class1"><select size="1" style="width: 100%;">
<option value="">Выбрать</option>
<option value="Существующее значение">Не измененный отображаемый текст-пояснение</option>
<option value="Существующее значение два">Не измененный отображаемый текст-пояснение два</option>
<option value="Существующее значение три">Не измененный отображаемый текст-пояснение три</option>
<option value="Существующее значение четыре">Не измененный отображаемый текст-пояснение четыре</option>
<option value="Существующее значение пять">Не измененный отображаемый текст-пояснение пять</option>
<option value="Существующее значение шесть">Не измененный отображаемый текст-пояснение шесть</option>
</select></td>

Необходимо сделать следующее:

<td id="id1" style="" class="class1"><select size="1" style="width: 100%;">
<option value="">Выбрать</option>
<option value="Своё значение">Свой отображаемый текст-пояснение</option>
<option value="Своё значение два">Свой отображаемый текст-пояснение два</option>
<option value="Своё значение три">Свой отображаемый текст-пояснение три</option>
</select></td>

Все значения и содержимое тегов полностью отличаются друг от друга.
Надо скрипт что-то типа такого:
Удалить существующие значения и содержимое;
Вставить собственные значения и содержимое

Да, это звучит, может, немного смешно, но типа такого и надо.

Как-то так, что ли...

И, кстати, результат предыдущего примера:

var select = document.querySelector('#id1 select');
var options = {
    'Свое значение 1': 'Текст1',
    'Свое значение 2': 'Текст2',
    'Свое значение 3': 'Текст3',
};

while (select.length > 1) {
    select.remove(select.length - 1);
}

for (var value in options) {
    select.appendChild(new Option(options[value], value));
}

Это то, что нужно. Только нет худа без добра. Если в значении (Свое значение *) поставлен перенос строки, то все портится...

"Свое \n значение"

danik.js,
на всякий случай

Цитата:

Сообщение от danik.js

while (select.length > 1) { select.remove(select.length - 1);}

===

select.options.length = 1;

Цитата:

Сообщение от danik.js

Свое \n значение

Да уж...

Я, пожалуй, осмелюсь ещё написать одну просьбу.
Дело в том, что скрипт не всегда срабатывает при загрузке страницы. Сначала грешил на расширение, а только потом подумал, что скрипт, скорее всего, выполняется раньше полной загрузки страницы.

Можно сделать так, чтобы он постоянно выполнялся с определенным интервалом, например, одна секунда, если это не слишком мало? Можно, конечно, что-то посложнее, только это будет ещё дольше. После полной загрузки страницы одноразово тоже не подходит.
И можно ли этот скрипт заодно привязать к классу ячейки таблицы?
В некоторых местах, как оказалось, идентификатор другой.