使用JavaScript在执行程序时将列表元素插入正文标记
我使用了一个由肯尼思库福克开发的思维地图程序。我之所以使用他的程序，是因为我有一个程序，它要求用户输入一个单词作为心灵地图的中心节点。然后，我的程序会问用户他们是否想继续。如果用户想要继续，那么用户将被要求为心智地图的子节点输入某些内容，并且这个过程将继续下去，直到用户不想输入。
下面是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>
在阅读了这些代码之后，我认为应该很容易理解，如果您想要添加一个子节点，那么您只需要一个新的li元素。
所以，现在我的问题是如何添加用户输入的新li项。这是因为在程序运行之前，我将删除body标记中存在的任何内容，以确保无关的东西不会出现在思维图中。但是，当我尝试使用并根据传递的数组填充它。中的代码时，我键入的单词没有出现在形状中，而是出现在左上角，如下图所示(我编写的代码也粘贴在下面)。
<!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。
回答 1
Stack Overflow用户
发布于 2015-11-17 14:43:51
从演示来看，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;
}希望这回答了你的问题，为什么它不适合你。再多挖一点，你就能把它做好了。
https://stackoverflow.com/questions/33759442
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号