Question

我希望将元素附加到另一个元素 - 它们必须可以在具有id="parent"的div类中找到。代码必须只在干净的JavaScript中。问题是，为什么我不能只使用append - children只附加1个元素（第一个块）所以需要一个循环来使每个元素（2）附加到（1）元素。

<!-- FirstBlock -->
<div id="parent">

    <div id="firstElement">
    </div>
    <div id="secondElement">
    </div>

</div>

我希望它看起来像这样

<!-- FirstBlock -->
<div id="parent">
    <div id="firstElement">
        <div id="secondElement">
        </div>
    </div>
</div>

这是我试过的代码： function getElement（）{ var firstElement = document.getElementById（'firstElement'）; var secondElement = document.getElementById（'secondElement'）; var parent = document.getgetElementById（'parent'）。children;

         for(var i = 0; i < parent.length; i++){
            for(firstElement in parent[i]){
                if(!(secondElement in firstElement){
                    firstElement.appendChild(secondElement);
                });
            };
         };

Fiddle

Answer 1

如果ID's相同，则需要使用class属性，或更改每个元素的ID。以下是如何实现结果的示例（CSS示例）。

＆＃13;

function getElement() {
	var parents = document.getElementsByClassName('parent'),
        parentsLength = parents.length;

	while (parentsLength--){
		var firstElements = parents[parentsLength].getElementsByClassName('firstElement'),
            firstElementsLength = firstElements.length,
			secondElements = parents[parentsLength].getElementsByClassName('secondElement');
        
        while(firstElementsLength--) {
            var secondElementsLength = secondElements.length;
            while(secondElementsLength--) {
	firstElements[firstElementsLength].appendChild(secondElements[secondElementsLength]);
            }
        }
	};
}

getElement();

＆＃13;

.firstElement {
    height: 50px;
    border: 1px solid #000;
}

.secondElement {
    background-color: #aaa;
}

＆＃13;

<!-- FirstBlock -->
<div class="parent">
    
    <div class="firstElement">
        dddd
    </div>
    <div class="secondElement">
        aaa
    </div>
  
</div>
<!-- SecondBlock -->
<div class="parent">
    
    <div class="firstElement">
        firstElement
    </div>
    <div class="secondElement">
        secondElement
    </div>
    
</div>
<!-- ThirdBlock -->     
<div class="parent">
    
    <div class="firstElement">
        firstElement
    </div>
    <div class="secondElement">
        secondElement
    </div>
    
</div>
    
    I want it look like this
<!-- FirstBlock -->
<div class="parent">
    <div class="firstElement">
        firstElement
        <div class="secondElement">
            secondElement
        </div>
    </div>
</div>
<!-- SecondBlock -->
<div class="parent">
    <div class="firstElement">
        firstElement
        <div class="secondElement">
            secondElement
        </div>
    </div>
</div>
<!-- ThirdBlock -->     
<div>
    <div class="parent">
    <div class="firstElement">
        firstElement
        <div class="secondElement">
            secondElement
        </div>
    </div>
</div>

＆＃13;

快速了解JavaScript .. 我们使用parent类获取每个元素，并将变量设置为该对象的长度。 while循环遍历每个div并获取包含firstElement和secondElement类的div。然后，更多循环将每个元素与类secondElement一起使用，并将它们插入到具有类firstElement的元素中。

最后，对于每个父div，任何类secondElement的div都将被插入到每个 div中，其中firstElement类为父母div。

Here is the fiddle我去了修改。希望这有帮助！

Answer 2

将您的HTML代码更改为包含类，而不是ID。不能有多个具有相同ID的元素。

<div class="parent">
    <div class="firstElement">
    </div>
    <div class="secondElement">
    </div>
</div>

然后使用以下JavaScript：

var parents = document.getElementsByClassName("parent");
for(i = 0; i < parents.length; i++){
    var current = parents[i];
    var firstElement = current.getElementsByClassName("firstElement")[0];
    var secondElement = current.getElementsByClassName("secondElement")[0];

    firstElement.appendChild(secondElement);
    current.removeChild(firstElement);
}

在div中查找Child元素，并使用javascript

2 个答案: