使用JavaScript执行程序时，将列表元素插入body标记中

Insert list elements into body tag when a programme is in excution by using JavaScript

本文关键字：body 插入 列表元素 JavaScript 执行程序 使用      更新时间：2023-09-26

我使用Kenneth Kufluk开发的思维导图程序。我之所以使用他的程序，是因为我有一个程序，要求用户在思维导图的中心节点输入一个单词。然后，我的程序会询问用户是否想继续。如果他们想继续，那么用户将被要求为思维导图的子节点输入一些东西，这个过程将继续，直到用户不想输入为止。

下面是HTML代码和一张图片，表示生成的思维导图：

<!DOCTYPE html>
<html>
<head>
  <!-- Kenneth Kufluk 2008/09/10 -->
  <title>js-mindmap demo - JavaScript Mindmap</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="js-mindmap.css" />
  <link href="style.css" type="text/css" rel="stylesheet"/>
  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <!-- UI, for draggable nodes -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
  <!-- Raphael for SVG support (won't work on android) -->
  <script type="text/javascript" src="raphael-min.js"></script>
  <!-- Mindmap -->
  <script type="text/javascript" src="js-mindmap.js"></script>
  <!-- Kick everything off -->
  <script src="script.js" type="text/javascript"></script>
</head>
    <body>
      <ul>
        <li><a>kenneth</a>
          <ul>
            <li><a>Twitter</a></li>
            <li><a>LinkedIn</a></li>
            <li><a>Facebook</a></li>
            <li><a>RSS Feed</a></li>
            <li><a> Feed</a></li>
          </ul>
        </li>
      </ul> 
    </body>
</html>

Kufluk的程序生成的思维导图

在阅读了这些代码之后，我认为应该很容易理解，如果你想添加一个子节点，那么你只需要一个新的li元素。

所以，现在我的问题是，如何添加用户键入的新li项。这是因为在程序运行之前，我会删除body标签中存在的任何内容，以确保不相关的内容不会出现在思维导图中。然而，当我尝试创建<ul>并根据传递的数组填充，我键入的单词没有出现在形状中，而是出现在左上角，如下图所示（我写的代码也粘贴在下面）。

<!DOCTYPE html>
<html>
<head>
  <!-- Kenneth Kufluk 2008/09/10 -->
  <title>js-mindmap demo - JavaScript Mindmap</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="js-mindmap.css" />
  <link href="style.css" type="text/css" rel="stylesheet"/>
  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <!-- UI, for draggable nodes -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
  <!-- Raphael for SVG support (won't work on android) -->
  <script type="text/javascript" src="raphael-min.js"></script>
  <!-- Mindmap -->
  <script type="text/javascript" src="js-mindmap.js"></script>
  <!-- Kick everything off -->
  <script src="script.js" type="text/javascript"></script>
  <script src="mindMapConstructor.js" type="text/javascript"></script>
</head>
<body>
    <div id="displayMindMap"></div>
    <script language= "javascript" type= "text/javascript">
        function generateMindMap()
        {
            var list = document.createElement('ul');
            var centerNode = document.createElement('li');
            var link = document.createElement('a');
            centerNode.appendChild(document.createTextNode('Kenneth'));
            list.appendChild(centerNode);
            return list;    
        }
        document.getElementById('displayMindMap').appendChild(generateMindMap());
    </script>

  <!-- <ul>
    <li><a>haha</a>
      <ul>
        <li><a>Twitter</a></li>
        <li><a>LinkedIn</a></li>
        <li><a>Facebook</a></li>
        <li><a>RSS Feed</a></li>
      </ul>
    </li>
  </ul> -->
</body>
</html>

单词出现在形状之外

如果有人知道如何使键入的单词呈现红色形状，请至少给我一些提示。非常感谢。

附言：这是我的大学作业，我所学的编程语言只有HTML和JavaScript。

从演示来看，script.js"开启了一切"。从本质上讲，当文档准备好时，它会获取数据并构建思维导图。

你正在向列表中添加元素，但思维导图不会自动注意到这一点；它只获取运行时存在的信息。

快速浏览思维导图代码后，我可以看到有几个功能，特别是：

$.fn.addNode = function (parent, name, options) {
    var obj = this[0];
    var node = obj.nodes[obj.nodes.length] = new Node(obj, name, parent, options);
    console.log(obj.root);
    obj.root.animateToStatic();
    return node;
}

和

$.fn.addRootNode = function (name, opts) {
    var node = this[0].nodes[0] = new Node(this[0], name, null, opts);
    this[0].root = node;
    return node;
}

希望这能回答你的问题，为什么它对你不起作用。再挖一点，你可能就可以把它做好了。

相关文章：