无法使用 jQuery (JavaScript) 附加 html答案

【问题标题】：not able to append html using jQuery (JavaScript)无法使用 jQuery (JavaScript) 附加 html
【发布时间】：2010-12-08 22:19:24
【问题描述】：

在这个 jquery 插件中：

http://www.stahs.org.uk/jquery.infinitecarousel.bak

有这样一行：

            $(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');

问题是当它转储此 div 中的文本节点时，它与 div 的顶部对齐。我希望文本与 div 的底部对齐。所以我决定在这个 div 中再创建一个 div：

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            console.log($('#textholder'+randID));
            $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; width: 1000px; vertical-align:bottom;"></div>');

控制台输出如下：

[div#textholder35196647.textholder]
[div#textholder62315889.textholder]
[div#textholder95654959.textholder]

但是，我上面的附加不起作用。嵌套的 div 永远不会出现，所以当我稍后这样做时：

                    if(t != null)
                {
                    $('#textholder'+randID+' div').html(t).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();
                }

没有文本可见，因为嵌套的 div 永远不会被创建。

所以我非常困惑。如果您查看原始插件，则此行有效：

 $('#textholder'+randID+' div').html(t)

它如何能够在这里定位正确的 div，但是当我在它创建后立即附加它时，它不存在，正如你们所建议的那样？

这也不起作用：

                var $texthold = jQuery('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            $(obj).append($texthold);
            $texthold.append('<div></div>')

感谢您的回复。

【问题讨论】：

"height: 94.25px" 真的吗？ 94 又四分之一像素？ ;-)
在尝试追加之前，您确定
确实存在吗？您是否在 Firebug 中进行了验证？你可以使用 jsFiddle.net 创建一个复制品吗？这是 jQuery 擅长的标准 DOM 操作代码。所以我很惊讶它不起作用。
@crowder，你知道 33.33px 尺寸的 diff 3 div 可以加起来 99px 或 100px，具体取决于浏览器？不久前我遇到了这个问题，最后存储了小数余数并将其添加到最后一个以保持一致的高度。
@Matrym：或者，你知道，使用 33.33、33.33 和 33.34。 :-) 只是像素的一小部分在 HTML 级别没有任何意义。（如果处理具有亚像素渲染的平板显示器，它们可以在显示驱动程序级别进行。）
@Crowder 理解并同意小数每个像素都是无稽之谈，但我只是分享一个有趣的发现。一些浏览器不会四舍五入 33.9999px。如果您想将 12 个月作为 div 放入 100px 高度的容器中，这可能会导致问题，因此您需要存储小数并将其转移到下一个容器中。

标签： javascript jquery html dom append

【解决方案1】：

听起来好像 randID 已在 $(obj).append... 行和您添加的 $('#textholder'+randID)... 行之间进行了修改。你确定randID 的值在这两行上是一样的吗？

【讨论】：

我只是想说，如果他在自己的代码中而不是在插件中添加第二个 div，似乎 randID 甚至都没有定义
我用控制台输出更新了问题。感谢您的回复。

【解决方案2】：

你确定 $(obj) 真的指的是你要附加到的元素吗？以防万一，您可能想反过来尝试一下：

$('<div id="textholder'+randID+'" class="textholder" style="position:absolute;' 
    +'bottom:0px;margin-bottom:'+(-imgHeight*o.textholderHeight)
    +'px;left:'+$(obj).css('paddingLeft')+'"></div>'
).appendTo(obj);

【讨论】：

【解决方案3】：

看来这行得通：

            function showtext(t)
            {

                if(t != null)
                {   

                    if(typeof $('#textholder'+randID).find('div')[0] == 'undefined'){
                        $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; vertical-align:bottom;"></div>');
                    }

                    $('#textholder'+randID+' div').html(t);

                    $('#textholder'+randID).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();

                }
            }

我不得不求助于 typeof 来检查 div 是否被声明，这有点疯狂。为什么插件的作者决定随机分配整数作为 div 的 id，这超出了我的理解。通过这样做，javascript 似乎很难保留随机创建的 id。这是我能想到的异常行为的唯一解释。

【讨论】：

【解决方案4】：

试试：

$(obj).after('html');

文档是here。

【讨论】：