Question

似乎我无法让输出出现在多个id中，甚至在类中出现。

请参阅下面的js小提琴。任何帮助都会非常有用。提前致谢

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

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

//或

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>

谢谢，伊万

Answer 1

我已按照以下方式更新了您的小提琴：

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

链接： http://jsfiddle.net/KgY9T/202/

Answer 2

不要多次使用同一个ID ..
然后，您最近的方法设置了一个公共class并尝试修改它们，但是，当您创建var searchBox时，您创建的array包含所有已创建的元素。

当您尝试以任何方式进行修改时，您需要将它们视为数组并循环。（对于所有这些或每个特定的东西都可以是相同的。）

所以，正如 @Shay Elkayam 指出的那样......做了一个循环并使用它，那很好。
但请记住......多个class是严格的...一个id总是。

<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/
弗雷德读者：https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

输出一个值到html多个类javascript

2 个答案: