DOM appendChild альтернативный - PullRequest
Новая
       18

DOM appendChild альтернативный

0 голосов
/ 11 июня 2011

Я создаю элемент DOM следующим образом: 

var imgEle = document.createElement('img');
    imgEle.src = imgURL;         
    x.appendChild(imgEle);

Теперь для последней строки вместо добавления, которая создает несколько элементов img при каждом вызове функции, я хочу, чтобы она заменялась ИЛИпервый дочерний элемент x ..

Как мне сделать то же самое для кроссбраузерной совместимости?

1 Ответ

4 голосов
/ 11 июня 2011 
var xChildren = x.childNodes;
if(xChildren[0])
   x.replaceChild(myIMG, xChildren[0]);
else
   x.appendChild(myIMG);

, который должен сделать трюк

Мы берем все дочерние элементы X, а затем проверяем, определен ли первый из них.(Если их несколько, вы также можете использовать метод x.innerHTML, чтобы удалить их все сразу).Если он определен, мы заменяем его новым созданным элементом, если нет - мы просто добавляем элемент.

РЕДАКТИРОВАТЬ: создавая и добавляя элементы в цикл, вы делаете свой сценарий немного тяжелым- поскольку кажется, что вы хотите просто изменить изображение, содержащееся в x, почему бы вам просто не прибегнуть к изменению атрибута .src?

var xChildren = x.childNodes;
var myIMG;    
if(xChildren[0])
   mIMG = xChildren[0]; //you should be sure that this is an image 
   // perhaps you might want to check its type.
else{
   mIMG = document.createElement("img");
   mIMG.src = "source";
   x.appendChild(mIMG);
}

//now the loop
while( your_condition )
    mIMG.src = "source of the image";

Таким образом, вы используете и редактируете только один элемент.

...