JavaScriptのappendChildが機能しない

JavaScriptを使用して子要素（li要素）を既存のリストに動的に追加しようとしています。JavaScriptのappendChildが機能しない

ターゲット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>"); 
}

Plunk：https://plnkr.co/edit/jLi9epblNAtMbzezcRSY?p=preview

誰かが見て、私は私がやっている聞かせてもらえます違う？それは直感的でなければならないようで、私はDOMを正しくトラバースしていると信じています。： -/

おかげで、

フィリップ

出典

2017-06-13 Philip Tenn

sectionListItemが定義されていません – justjavac

$（agendaDiv）は、agendaDivがすでにjQueryオブジェクトの場合は意味を持ちません。 – epascarello

はappend()にappendChild()を交換してください：

JSfiddle Demo

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>

出典

2017-06-13 01:10:46

メソッドappendChildはネイティブjsからです。 agendaSectionsはjQuery要素なので、jQueryのappend()メソッドを使用する必要があります。

出典

2017-06-13 01:12:25 JamPow

appendChildはjQuery関数ではありません。これはDOM APIの一部であり、DOMノードでのみ使用できます。 jQueryオブジェクトはDOMノードではありません。 SectionTextは、ユーザー提供のデータである場合、これはまた、HTMLインジェクションを防ぐ

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

：あなたは、実際の<li>要素を作成することができたときに、しかし、最初の場所でHTMLを操作すべき理由はありません。それがうまくいく

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

：これを

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

し、HTMLに追加します。

出典

2017-06-13 01:13:22 Ryan

はこれにあなたの generateRemoveSectionDropDownメソッドのコードを変更し

。

plunkを参照してください。

出典

2017-06-13 01:13:48 DDan

JavaScriptのappendChildが機能しない

答えて

関連する問題