我正在尝试使用JavaScript将子元素(li元素(动态附加到现有列表中。
目标 DOM:
<body>
<div class="dd" name="agenda-nestable" id="nestable">
<ol id="agenda-root" class="dd-list">
<li class="dd-item" id="2879">
<div class="dd-handle">Section123</div>
</li>
<li class="dd-item" id="2880">
<div class="dd-handle">Section 4</div>
</li>
<li class="dd-item" id="2881">
<div class="dd-handle">Section 5</div>
</li>
</ol>
</div>
<button value onclick='addSection()'>Add Section</button>
</body>
JavaScript:
function addSection() {
var data = { SectionId: 123, SectionText: 'Section Name'};
var agendaDiv = $("[name='agenda-nestable']");
var agendaSections = $(agendaDiv).find("ol#agenda-root");
agendaSections.appendChild('<li class="dd-item" data-id="' + data.SectionId + '" id="' + data.SectionId + '">' +
'<div class="dd-handle">' + data.SectionText + "</div></li>");
}
普伦克:https://plnkr.co/edit/jLi9epblNAtMbzezcRSY?p=preview
有人可以看看,让我知道我做错了什么吗? 看起来它应该很简单,我相信我正确地遍历了 DOM。:-/
谢谢
菲利普
appendChild
不是jQuery函数;它是DOM API的一部分,你只能在DOM节点上使用它。 jQuery对象不是DOM节点。但是,当您可以创建实际的<li>
元素时,首先没有理由操作HTML:
agendaSections.append(
$('<li>', {
class: "dd-item",
'data-id': data.SectionId,
id: data.SectionId,
}).append(
$('<div>', { class: 'dd-handle', text: data.SectionText })
)
);
如果SectionText
是用户提供的数据,这还可以防止 HTML 注入。
尝试将appendChild()
替换为append()
:
JSfiddle 演示
function addSection() {
var data = { SectionId: 123, SectionText: 'Section Name'};
var agendaDiv = $("[name='agenda-nestable']");
var agendaSections = $(agendaDiv).find("ol#agenda-root");
agendaSections.append('<li class="dd-item" data-id="' + data.SectionId + '" id="' + data.SectionId + '">' +
'<div class="dd-handle">' + data.SectionText + "</div></li>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="dd" name="agenda-nestable" id="nestable">
<ol id="agenda-root" class="dd-list">
<li class="dd-item" id="2879">
<div class="dd-handle">Section123</div>
</li>
<li class="dd-item" id="2880">
<div class="dd-handle">Section 4</div>
</li>
<li class="dd-item" id="2881">
<div class="dd-handle">Section 5</div>
</li>
</ol>
</div>
<button value onclick='addSection()'>Add Section</button>
</body>
方法appendChild
来自本机 js。 agendaSections
是一个 jQuery 元素,所以你需要使用 jQuery append()
方法。
将generateRemoveSectionDropDown
方法代码更改为:
function generateRemoveSectionDropDown() {
$("#nestable ol#agenda-root>li").each( function() {
$('#RemoveSectionId').append($('<option>', {text: $(this).text() }));
});
}
并将以下内容添加到您的 html 中:
<select id="RemoveSectionId"></select>
它会很好地工作。
见扑通。