javascript - 在 div 中查找子元素并使用 javascript 将它们附加到另一个子元素

Question

我希望将元素附加到另一个元素 - 它们必须 可以在具有 id="parent" 的 div 类中找到。 代码必须仅使用干净的 JavaScript。问题是，为什么我不能只使用附加 - 子级仅附加 1 个元素(第一个 block )，因此需要一个循环来将每个元素(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>

这是我尝试过的代码: 函数 getElement() { var firstElement = document.getElementById('firstElement'); var secondaryElement = document.getElementById('secondElement'); varparent = 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)。

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();

.firstElement {
    height: 50px;
    border: 1px solid #000;
}

.secondElement {
    background-color: #aaa;
}

<!-- 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>    

JavaScript 的快速概述.. 我们使用 parent 获取每个元素类并将变量设置为该对象的长度。 while循环正在遍历每个 div 并获取其中包含 firstElement 的 div。和secondElement类。 然后更多的循环获取类 secondElement 的每个元素。并将它们插入到类 firstElement 的元素中.

最后，对于每个父 div，任何具有 secondElement 类的 div将被插入到类别为 firstElement 的每个 div 中在该父 div 内部。

Here is the fiddle我去进行修改。希望这有帮助!