Javascript 元素的子元素不工作_Javascript_Jquery_Dom

Javascript 元素的子元素不工作

javascript jquery dom

Javascript 元素的子元素不工作,javascript,jquery,dom,Javascript,Jquery,Dom,我试图使用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">Sect

我试图使用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>



第123节


第四节


第五节

添加节

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>");
}

函数addSection（）{
var data={SectionId:123，SectionText:'Section Name'}；
var agendaDiv=$（“[name='agendable-nestable']”）；
var agendaSections=$（agendaDiv）.find（“ol#议程根”）；
agendaSections.appendChild（'）+
''+data.SectionText+“”；
}

Plunk：

有人能看一下，让我知道我做错了什么吗？看起来应该很简单，我相信我正确地遍历了DOM-/

谢谢

Philip

尝试将

appendChild（）

替换为

append（）

：

函数addSection（）{
var data={SectionId:123，SectionText:'Section Name'}；
var agendaDiv=$（“[name='agendable-nestable']”）；
var agendaSections=$（agendaDiv）.find（“ol#议程根”）；
agendaSections.append（“）+
''+data.SectionText+“”；
}



第123节


第四节


第五节

添加节

尝试将

appendChild（）

替换为

append（）

：

函数addSection（）{
var data={SectionId:123，SectionText:'Section Name'}；
var agendaDiv=$（“[name='agendable-nestable']”）；
var agendaSections=$（agendaDiv）.find（“ol#议程根”）；
agendaSections.append（“）+
''+data.SectionText+“”；
}



第123节


第四节


第五节

添加节

方法

appendChild

来自原生js

AgentActions

是一个jQuery元素，因此需要使用jQuery中的

append（）

方法。

方法

appendChild

来自原生js

AgentActions

是一个jQuery元素，因此需要使用jQuery中的

append（）

方法。

appendChild

不是jQuery函数；它是DOM API的一部分，您只能在DOM节点上使用它。jQuery对象不是DOM节点。但是，当您可以创建一个实际的

元素时，没有理由首先操纵HTML：

agendaSections.append(
    $('<li>', {
        class: "dd-item",
        'data-id': data.SectionId,
        id: data.SectionId,
    }).append(
        $('<div>', { class: 'dd-handle', text: data.SectionText })
    )
);

agendactions.append(
$（“”{
类别：“dd项目”，
“数据id”：data.SectionId，
id:data.SectionId，
}).附加(
$（''，{class:'dd handle'，text:data.SectionText}）
)
);

如果

SectionText

是用户提供的数据，这也可以防止HTML注入。

appendChild

不是jQuery函数；它是DOM API的一部分，您只能在DOM节点上使用它。jQuery对象不是DOM节点。但是，当您可以创建一个实际的

元素时，没有理由首先操纵HTML：

agendaSections.append(
    $('<li>', {
        class: "dd-item",
        'data-id': data.SectionId,
        id: data.SectionId,
    }).append(
        $('<div>', { class: 'dd-handle', text: data.SectionText })
    )
);

agendactions.append(
$（“”{
类别：“dd项目”，
“数据id”：data.SectionId，
id:data.SectionId，
}).附加(
$（''，{class:'dd handle'，text:data.SectionText}）
)
);

如果

SectionText

是用户提供的数据，这也会阻止HTML注入。

将

generateRemoveSectionDropDown

方法代码更改为：

function generateRemoveSectionDropDown() {
    $("#nestable ol#agenda-root>li").each( function() {
       $('#RemoveSectionId').append($('<option>', {text: $(this).text() }));
    });
}

函数生成器移动部分下拉列表（）{
$（“#nestable ol#agenda root>li”）。每个（函数（）{
$（'#RemoveSectionId'）。追加（$（''，{text:$（this.text（）}））；
});
}

并将以下内容添加到html中：

<select id="RemoveSectionId"></select>

它将很好地工作

请参阅。

将您的

GenerateRemoveSection下拉列表

方法代码更改为：

function generateRemoveSectionDropDown() {
    $("#nestable ol#agenda-root>li").each( function() {
       $('#RemoveSectionId').append($('<option>', {text: $(this).text() }));
    });
}

函数生成器移动部分下拉列表（）{
$（“#nestable ol#agenda root>li”）。每个（函数（）{
$（'#RemoveSectionId'）。追加（$（''，{text:$（this.text（）}））；
});
}

并将以下内容添加到html中：

<select id="RemoveSectionId"></select>

它将很好地工作

请参阅。

sectionListItem未定义$（agendaDiv）在agendaDiv已经是jQuery对象时没有意义。sectionListItem未定义$（agendaDiv）在agendaDiv已经是jQuery对象时没有意义。