输出一个值到html多个类javascript

Question

It seems i can't get an output to appear in multiple id's or even appear at all in a class.

please see js fiddle below. Any help would be super useful. Thanks in advance

http://jsfiddle.net/KgY9T/201/

//javascript
var searchBox = document.getElementById("searchOutput");

searchBox.appendChild(document.createTextNode('testlol'));

//or

var searchBox = getElementsByClassName("searchOutput");

searchBox.appendChild(document.createTextNode('textnolols'));

<div id="searchBox">
    <div class="searchBoxModule">
        <a id='searchOutput'></a>
    </div>
    <div class="searchBoxModule">
        <a id='searchOutput'></a>
    </div>
    <div class="searchBoxModule">
        <a id='searchOutput'></a>
    </div>
</div>

<br>
or
<br>

<div id="searchBox">
    <div class="searchBoxModule">
        <a class='searchOutput'></a>
    </div>
    <div class="searchBoxModule">
        <a class='searchOutput'></a>
    </div>
    <div class="searchBoxModule">
        <a class='searchOutput'></a>
    </div>
</div>

Thanks, Ewan

Answer 1

I've updated your fiddle as follows:

var searchBox = document.getElementsByClassName("searchOutput");
for(i=0;i<searchBox.length;i++){        
   searchBox[i].appendChild(document.createTextNode('textnolols'));
}

link: http://jsfiddle.net/KgY9T/202/

Answer 2

never use same ID more than once..
Then, your closest approach was set a common class and try to modify them, but, when you create the var searchBox you are creating an array with all the elements founds.

When you try to modify in any way, you need to treat them like an array and loop over. (could be the same for all of them or something specific for each.)

So, as @Shay Elkayam point it out... made a loop and work with that, that's fine.
But remember... Multiple class are rigth.. one id always.

<script type="text/javascript">
    window.onload=function(){
        // crate an array with all elements found
        var searchBox = document.getElementsByClassName("searchOutput");
        // now, loop over the array and do what you need
        for( var i in searchBox) {
            // appendchild for each obj. in array
            searchBox[i].appendChild( document.createTextNode('textnolols') );
        }
    }
</script>

<div id="searchBox">
    <div class="searchBoxModule">
        <a class='searchOutput'></a>
    </div>
    <div class="searchBoxModule">
        <a class='searchOutput'></a>
    </div>
    <div class="searchBoxModule">
        <a class='searchOutput'></a>
    </div>
</div>

• jsFiddle update: http://jsfiddle.net/KgY9T/203/
• Furder reader: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName