如何解析 [object HTMLDivElement]

How to parse [object HTMLDivElement]?

本文关键字：HTMLDivElement object 何解析      更新时间：2023-09-26

我在将对象注入回 DOM 时遇到问题。我必须抓住一个div 把它放在一个数组中，然后注入到 DOM。但是当我注入回 DOM 时，我显示 [object HTMLDivElement] 而不是div。我错过了什么。代码是在jsfiddle设置的。http://jsfiddle.net/rexonms/zdzdnuo7/

提前致谢

.HTML

    <!-- Section A -->
    <div id="stories">
        <ul class="slider"></ul>
    </div>
    <!-- Section B -->
    <div id="x">
        <div class="story">A</div>
        <div class="story">B</div>
        <div class="story">C</div>
        <div class="story">D</div>
        <div class="story">E</div>
    </div>

JAVASCRIPT

    var items = $('.story');   
    var itemsPerSlide = 2;
    var parent = [];
    var children = [];
    // Divide the items in chunks
    for(var i=0; i<items.length; i++){
        if(i<itemsPerSlide){
            children.push(items[i]);
        }
        else{
            itemsPerSlide = itemsPerSlide + i;
            childrenToParent(children, parent);
            children = [];
            children.push(items[i]);
        }
    }
    childrenToParent(children, parent);
    $('.slider').append(parent);

    function childrenToParent(children, parent){
        parent.push("<li>" + extractEls(children) + "</li>");
    }

    function extractEls(children){
        var toReturn = '';
        for(var i = 0; i<children.length; i++){
            toReturn += children[i];
        }
        return toReturn;
    }

如果要使原始容器完好无损，只需克隆要复制其节点的容器并从复制的容器中获取节点。

你把它们放到数组中，然后多次运行一个循环，相反，你可以运行一个循环一次，同时把它们放在你的.slider类中。

工作/更新： JS Fiddle Link

JS Part: 

var storyCopy = $("#x").clone();
var items = storyCopy.find(".story"); 
var itemsPerSlide = 2;
var counter = 0;
var LIElement = document.createElement("li");
for(var i=0; i<items.length; i++) {
    LIElement.appendChild(items[i]);
    counter++;
    if(counter >= itemsPerSlide) {
        $('.slider').append(LIElement);
        LIElement = document.createElement("li");
        counter = 0;
    }
}
$('.slider').append(LIElement);
我相信

这一行是你的问题：

toReturn += children[i];

这应该是代替它：

toReturn += $(children[i]);

将outerHTML添加到子项

  function extractEls(children){
    var toReturn = '';
    for(var i = 0; i<children.length; i++){
         toReturn += children[i].outerHTML; //changed
    }
    return toReturn;
}

演示

您需要

在最终代码中添加.html()。 我已经用这个链接更新了你的编码

您遇到的问题是您将 DOM 节点视为字符串。将元素添加到字符串会导致调用 .toString（），并获得看到的输出。

如果您只是想将它们分组并将它们放在 lis 中，您可以使用 slice 和 wrapAll 轻松完成。 

var storyHolder = $("#x").clone();
var stories = storyHolder.find(".story");
var itemsPerSlide = 2;
for (var i = 0; i < stories.length; i += itemsPerSlide ) {
    var li = $("<li/>");
    stories.slice(i, i + itemsPerSlide ).wrapAll(li);
}
$(".slider").append(storyHolder.children());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Section A -->
    <div id="stories">
        <ul class="slider"></ul>
    </div>
    <!-- Section B -->
    <div id="x">
        <div class="story">A</div>
        <div class="story">B</div>
        <div class="story">C</div>
        <div class="story">D</div>
        <div class="story">E</div>
    </div>

相关文章：