Javascript 脚本生成的动态html元素有问题
我正在为我的HTMl页面开发注释部分。我将其放置在页面中Javascript 脚本生成的动态html元素有问题,javascript,html,Javascript,Html,我正在为我的HTMl页面开发注释部分。我将其放置在页面中body部分的div容器中，如下所示： <body> ... <div id='commentsTree'></div> ... </body> css: 我在我的页面中添加了css和脚本，并尝试通过这种方式添加注释部分（treeListScript.js和treeListStyle.css）： 行windowTask.document.getElementB
bodydiv<body>
...
<div id='commentsTree'></div>
...
</body>
windowTask.document.getElementById（'commentsTree'）。innerHTML=createCommentsTree（comments）创建注释部分
那么，我做错了什么，我应该为我的网页上正确的展开功能作品做什么？如果有什么不清楚的地方，问一下，我试着解释。我自己解决问题。原因是我将事件处理程序添加到.caret
元素中不正确，我将其作为脚本添加到head部分，但我需要在生成comment部分后添加它，方法如下：
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
//creating new HTML page +++
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
//creating new HTML page ---
//creating comment section +++
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
//creating comment section ---
//adding event handler +++
var toggler = windowTask.document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
//adding event handler ---
//创建新的HTML页面+++
var windowTask=window.open（“http://localhost/testapp/site/windows/formTask.html“，”任务表“）；
windowTask.onload=函数（）{
windowTask.document.getElementById（“formTitle”）.innerText=“Task”+selectedRow.taskID；
windowTask.document.getElementById（“taskID”）.value=selectedRow.taskID；
windowTask.document.getElementById（“title”）.value=selectedRow.title；
windowTask.document.getElementById（“状态”）.value=selectedRow.status；
windowTask.document.getElementById（“创建者”）.value=selectedRow.creator；
windowTask.document.getElementById（“负责”）.value=selectedRow.responsible；
windowTask.document.getElementById（“说明”）.value=selectedRow.description；
windowTask.document.getElementById（“dateCreation”）.value=selectedRow.dateCreation；
windowTask.document.getElementById（“dateStart”）.value=selectedRow.dateStart；
windowTask.document.getElementById（“dateFinish”）.value=selectedRow.dateFinish；
//创建新的HTML页面---
//创建注释部分+++
var comments=getCommentsTree（selectedRow.taskID，'task'）；
windowTask.document.getElementById（'commentsTree'）。innerHTML=createCommentsTree（comments）；
//创建注释部分---
//添加事件处理程序+++
var-toggler=windowTask.document.getElementsByClassName（“插入符号”）；
var i；
对于（i=0；i
现在一切都正常了。如果有人花时间问我的问题，谢谢。你的问题不清楚。什么是windowTask
？windowTask是HTML页面，我试图在其中添加我的评论部分。我这样创建它：“var windowTask=window.open（“，“taskForm”）；”我更改了问题描述，也许现在会更清楚，我希望。您的代码尝试为.caret
元素添加单击事件处理程序，该操作何时执行？
/* Remove default bullets */
ul, #myUL {
list-style-type: none;
}
.textFieldRoot {
position: relative;
left: 15px;
width: 100%;
}
.textField {
position: relative;
width: 100%;
}
/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
position: absolute;
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
<head>
...
<script type="text/javascript" src="http://localhost/testapp/lib/others/treeList/treeListScript.js"></script>
<link rel="stylesheet" href="http://localhost/testapp/lib/others/treeList/treeListStyle.css">
...
</head>
<body>
...
<div id='commentsTree'></div>
...
</body>
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
//creating new HTML page +++
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
//creating new HTML page ---
//creating comment section +++
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
//creating comment section ---
//adding event handler +++
var toggler = windowTask.document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
//adding event handler ---