Использование Javascript DOM для получения первого элемента с именем тега

Question

Im Попытка получить первый элемент с тегом <figure> с использованием getElementByTagName().firstChild[0].innerHTML, но у меня возникают проблемы при добавлении его в контент, я получаю undefined.

Вот javascript, который я использую.

function loopImage() 
{ 
    var value = document.getElementById("loopvalue").value; 
    var content = document.getElementById("contained"); 
    if(value >= 1) 
    { 
    content.innerHTML = '<br><input type="button" value="Search" onClick="loopImage()"><input type="text" id="loopvalue"><br><br>'; 
    for(var i =0;i< value; i++) 
    { 
     content.innerHTML = content.innerHTML + content.getElementByTagName('figure').firstChild[0].innerHTML; 
    } 
    content.innerHTML = content.innerHTML + '<style>figure:nth-of-type(2n+2){background:black;color:red;}</style>'; 
    } 
    else if(value == "") location.reload(); 
    else if(value <= 0) alert("Positive Numbers only!"); 
    else alert("Are you sure that was a number?") 
} 

А вот HTML, что я пытаюсь получить содержимое из,

<div class="container" id="contained"> 
    <br> 

    <input type="button" value="Search" onClick="loopImage()"> 
    <input type="text" id="loopvalue"> 


<br><br> 
<figure> 
    <a href="photos/DSC01049.JPG"> 
     <img src = "photos/DSC01049.JPG" alt="City view" height="200" width="200"> 
    </a> 
    <figcaption>City View</figcaption> 
</figure> 

<figure> 
    <a href="photos/DSC01066.JPG"> 
     <img src = "photos/DSC01066.JPG" alt="City view" height="200" width="200"> 
    </a> 
    <figcaption>Ferris Wheel</figcaption> 
</figure> 

<figure> 
    <a href="photos/DSC02511.JPG"> 
     <img src = "photos/DSC02511.JPG" alt="City view" height="200" width="200"> 
    </a> 
    <figcaption>Old Mates House</figcaption> 
</figure> 

<figure> 
    <a href="photos/DSC03810.JPG"> 
     <img src = "photos/DSC03810.JPG" alt="City view" height="200" width="200"> 
    </a> 
    <figcaption>City Skyline</figcaption> 
</figure> 

<figure> 
    <a href="photos/DSC05750.JPG"> 
     <img src = "photos/DSC05750.JPG" alt="City view" height="200" width="200"> 
    </a> 
    <figcaption>Beach</figcaption> 
</figure> 


</div> 

Answer 1

Две проблемы с кодом вы цитируемого:

content.getElementByTagName('figure').firstChild[0].innerHTML 
// Missing s -----^     ^^^^^^^^^^^^^^--- there is no firstChild on the return value 

Так что теоретически это может быть

content.getElementsByTagName('figure')[0].innerHTML 

... но это получает список, а затем берет первый из них, когда вы просто хотите первый и не нуждаетесь в списке вообще. Я бы, наверное, просто получить первый один:

content.querySelector('figure').innerHTML 

querySelector находит первый соответствующий элемент для селектора CSS, или null, если ни один не совпадает. Он поддерживается всеми современными браузерами, а также IE8. (Это относительный номер querySelectorAll, который возвращает список соответствующих элементов для селектора CSS.)

Answer 2

Это решает:

content.getElementsByTagName('figure')[0].innerHTML