JavaScript的appendChild元素不工作

我正在嘗試使用JavaScript動態追加子元素（李元素）到現有的列表。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>"); 
}

普拉克：https://plnkr.co/edit/jLi9epblNAtMbzezcRSY?p=preview

可能有人請看看，讓我知道我在做什麼錯誤？它似乎應該是直截了當的，我相信我正確地遍歷DOM。： -/

感謝，

菲利普

來源

2017-06-13 Philip Tenn

sectionListItem未定義 – justjavac

$（agendaDiv）當agendaDiv已經是jQuery對象時沒有任何意義。 – epascarello

嘗試更換appendChild()到append()：

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節點。我們沒有理由成爲擺在首位操縱HTML，不過，當你可以創建一個實際<li>元素：

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

這也可以防止HTML注入，如果SectionText爲用戶提供的數據。

來源

2017-06-13 01:13:22 Ryan

更改generateRemoveSectionDropDown方法的代碼如下：

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

並添加到您的HTML這樣的：

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

，它將正常工作。

參見plunk。

來源

2017-06-13 01:13:48 DDan

JavaScript的appendChild元素不工作

回答

相關問題