Question

我正在尝试将带有class =“SomeDiv”的div移动到ID =“ParentDiv”的div中/内部

如果我编辑javascript以将带有ID的div移动到具有可用的diff ID的另一个div中。但是将带有Class的div移动到带有ID的div中是行不通的。我错过了什么吗？

HTML

<div id="ParentDiv">
    <div id="ChildDiv">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
    <!-- move SomeDiv here -->
</div>
<div class="SomeDiv">some content</div>

JS：

document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv'));

http://jsfiddle.net/9gvsa/1/

Answer 1

.getElementsByClassName返回数组，所以你最后需要一个索引：

document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[0]);

Answer 2

使用jquery让它更容易，查看jsfiddle的更新版本，你可以通过检查dom树看到项目已被移动

$(document).ready(function(){
$("#ParentDiv").append($(".SomeDiv"));
});

example

Answer 3

改为使用document.getElementsByClassName('SomeDiv')[0]，
getElementsByClassName返回一个元素数组，而getElementsById返回单个元素

Answer 4

来源：document.getElementsByClassName

getElementsByClassName返回找到元素的HTMLCollection。

如果你知道你的div有一个独特的课程，你可以做

document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[0]);

Answer 5

你不能得到像这样的类的元素。 document.getElementsByClassName返回一个数组。你必须做类似的事情......

document.getElementsByClassName('SomeDiv')[0]

此外，如果您想将该className的所有div放在div中，请进行一些迭代。

for (i=0;i<=document.getElementsByClassName('SomeDiv').length;i++) {
    document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[i]);
}

在具有ID的另一个div内移动div

5 个答案: