javascript - 没有输出到 DOM 树-6ren

javascript - 没有输出到 DOM 树

转载作者：行者123 更新时间：2023-11-30 06:05:22

25

4

在下面的代码中，我尝试动态创建 preparePlaceholder失败了，唯一的错误是错误控制台中的“parent is not defined”。

我正在修改此示例以与 JS 对象文字一起使用，并且可以使用StackOverflow 的圣人智慧。

TIA

imageGallery={

    // IDs
    placeHolderID:'placeholder',
    imageNavListID:'imagegallerylist',

    // CSS Classes

    init:function(){

        if(!document.getElementById || !document.createTextNode){return;}
        imageGallery.preparePlaceholder();// Call to preparePlacholder
        // Prepare Gallery:
        imageGallery.navList = document.getElementById(imageGallery.imageNavListID);
        if(!imageGallery.navList){return;}
        var links = imageGallery.navList.getElementsByTagName('a');
        for(var i = 0; i<links.length;i++){
        links[i].onclick = function(){
        // Call to showPic function:    
        return imageGallery.showPic(this) ? false : true;
        }

      }


},


    showPic:function(whichpic){
        imageGallery.pHolder=document.getElementById(imageGallery.placeHolderID);
        if(!imageGallery.pHolder || imageGallery.pHolder.nodeName != "IMG"){return;}
        var source = whichpic.getAttribute("href");
        imageGallery.pHolder.setAttribute("src",source);
        if(document.getElementById("description")){
            // var text = whichpic.getAttribute("title");
            var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
            var description = document.getElementById("description");
            if(description.firstChild.nodeType == 3){
            description.firstChild.nodeValue = text;

            }

        }
        return true;

},

    preparePlaceholder:function(){
        var placeholder = document.createElement("img");
        placeholder.setAttribute("id", "placeholder");
        placeholder.setAttribute("src","images/placeholder.gif");
        placeholder.setAttribute("alt","My Image Gallery");
        // alert(placeholder);
        var description = document.createElement("p");
        description.setAttribute("id","description");
        var desctext = document.createTextNode("Choose an Image");
        description.appendChild(desctext);
        var gallery = document.getElementById("imageGallery");
        imageGallery.insertAfter(placeholder,imageGallery);
        imageGallery.insertAfter(description,imageGallery.placeholder);

        // alert("Function Called");
},

// Utility Functions
      insertAfter:function(newElement,targetElement){
        var parent = targetElement.parentNode;
        if(parent.lastChild == targetElement){
            parent.appendChild(newElement);

        } else {

            parent.insertBefore(newElement,targetElement.nextSibling);

        }

    },
    addLoadEvent:function(func){
        var oldonload = window.onload;
        if(typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }

        }

    }

}   
// End Utility Functions    

imageGallery.addLoadEvent(imageGallery.init);   

// window.onload=imageGallery.init;


  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="uft-8" />
    <title>Image Gallery</title>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" title="layout" charset="utf-8" />

</head>
<body>
    <h1>Snapshots</h1>
    <ul id="imagegallerylist">
    <!--Links Here-->
    </ul>   
<script src="scripts/imageGallery.js"></script>
</body> 
</html>

最佳答案

举个例子here这不会产生错误。我已删除您的评论并在我更改代码的地方添加评论。

JavaScript:

var gallery = document.getElementById("imageGallery");
// Changed from imageGallery to gallery
imageGallery.insertAfter(placeholder, gallery);
// Changed from imageGallery.placeholder to placeholder
imageGallery.insertAfter(description, placeholder);

HTML:

<div id="imageGallery"></div> <!-- Added this div -->

关于javascript - 没有输出到 DOM 树，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5313293/

25

4

0

文章推荐： Java 对象为空或对象的属性为空？

文章推荐： java - Spring Integration Java DSL HTTP 在超时错误内未收到回复

文章推荐： java - 缓存不可序列化的对象

文章推荐： Javascript/Node.js : data patching scheme

树结构之MongoDb 使用的到底是 B 树，还是 B+ 树？
关于 B 树与 B+ 树，网上有一个比较经典的问题：为什么 MongoDb 使用 B 树，而 MySQL 索引使用 B+ 树? 但实际上 MongoDb 真的用的是 B 树吗?
c# - 持久(基于磁盘)R 树(或 R* 树)
如何将 R* Tree 实现为持久(基于磁盘)树？保存 R* 树索引或保存叶值的文件的体系结构是什么？注意:此外，如何在这种持久性 R* 树中执行插入、更新和删除操作？注意事项二:我已经实现了一个
java - 给定另一个 AST 树，在 Java 中创建一个 AST 树
目前，我正在努力用 Java 表示我用 SML 编写的 AST 树，这样我就可以随时用 Java 遍历它。我想知道是否应该在 Java 中创建一个 Node 类，其中包含我想要表示的数据，以及一个数
c++ - C++ 中任何好的范围查询库(使用 K-D 树、四叉树或 R 树)
我之前用过这个库http://www.cs.umd.edu/~mount/ANN/ .但是，它们不提供范围查询实现。我猜是否有一个 C++ 范围查询实现(圆形或矩形)，用于查询二维数据。谢谢。最佳
为什么MySQL数据库索引选择使用B+树?
在进一步分析为什么MySQL数据库索引选择使用B+树之前，我相信很多小伙伴对数据结构中的树还是有些许模糊的，因此我们由浅入深一步步探讨树的演进过程，在一步步引出B树以及为什么MySQL数据库索引选择
操作系统的那棵“树”---06
操作系统的那棵“树” 今天从一颗开始，我们看看如何从小树苗长成一颗苍天大树。运转CPU CPU运转起来很简单，就是不断的从内存取值执行。 CPU没有好好运转 IO是个耗费时间的活，如果CPU在取值
r - 从物种列表制作简单的系统发育树状图(树)
我想为海洋生物学类(class)制作一个简单的系统发育树作为教育示例。我有一个具有分类等级的物种列表: Group <- c("Benthos","Benthos","Benthos","Be
c++ - 树，无法正确删除节点
我从这段代码中删除节点时遇到问题，如果我插入数字 12 并尝试删除它，它不会删除它，我尝试调试，似乎当它尝试删除时，它出错了树的。但是，如果我尝试删除它已经插入主节点的节点，它将删除它，或者我插入数字
haskell - 如何在Haskell中实现B+树？
B+ 树的叶节点链接在一起。将 B+ 树的指针结构视为有向图，它不是循环的。但是忽略指针的方向并将其视为链接在一起的无向叶节点会在图中创建循环。在 Haskell 中，如何将叶子构造为父内部节点的子
GWT 树，开幕事件
我在 GWT 中使用树控件。我有一个自定义小部件，我将其添加为 TreeItem: Tree testTree = new Tree(); testTree.addItem(myWidget); 我想
c - 树/链表结构的遍历
它有点像混合树/链表结构。这是我定义结构的方式 struct node { nodeP sibling; nodeP child; nodeP parent; char
c - 树:使用队列进行层序遍历
我编写了使用队列遍历树的代码，但是下面的出队函数生成错误，head = p->next 是否有问题？我不明白为什么这部分是错误的。 void Levelorder(void) { node *tmp,
javascript - 将平面数组解析为嵌套结构(树)
例如，我想解析以下数组: var array1 = ["a.b.c.d", "a.e.f.g", "a.h", "a.i.j", "a.b.k"] 进入: var json1 = { "nod
java - 树-路径总和
问题 -> 给定一棵二叉树和一个和，确定该树是否具有从根到叶的路径，使得沿路径的所有值相加等于给定的和。我的解决方案 -> public class Solution { public bo
带有列的 Java 树
我有一个创建 java 树的任务，它包含三列:运动名称、运动类别中的运动计数和上次更新。类似的东西显示在下面的图像上: 如您所见，有 4 种运动:水上运动、球类运动、跳伞运动和舞蹈运动。当我展开 sk
mysql - H2数据库中的B+树
我想在 H2 数据库中实现 B+ Tree，但我想知道，B+ Tree 功能在 H2 数据库中可用吗？最佳答案 H2 已经使用了 B+ 树(PageBtree 类)。关于mysql - H2数据库
java - 字符串数组(树)
假设我们有 5 个字符串数组: String[] array1 = {"hello", "i", "cat"}; String[] array2 = {"hello", "i", "am"}; Str
每个节点具有恒定时间的 C++ 树
我正在处理树。每个节点都有带有 Tree * 值的对象。我读取的数据如下所示: 1 2 2 ... 这意味着，将 1 作为 0 的子节点，将 2 作为 1 的子节点，将 3 作为 o 2 的子节点。在
JavaScript 树/树网格库
我正在寻找一个好的 JavaScript 树/树网格包。现在——在你回答之前: 它需要能够在大量节点上正常运行。可能有 1,000 个兄弟节点。它需要能够在 2 或 3 秒内绘制到 1,000 个节点
c++ - 这个代码块到底是如何工作的[树]？
下面的代码块究竟是如何工作的？更具体地说，程序如何知道返回哪个选项？ return ancestor (node1->left(), node2) || ancestor

首页

博学

6Ren·AI

商城

javascript - 没有输出到 DOM 树