繁体   English   中英

元素的JavaScript appendChild不起作用

[英]JavaScript appendChild for element not working

我正在尝试使用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>

它将运作良好。

朋克

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM