li.parent 不是函数

Question

我正在尝试根据用户输入创建一个列表。但是我不断收到错误：li.parent 不是函数。如何解决这个问题并创建用户输入结果列表？这是我尝试过的，我的 html：        <table id="resultTable" cellpadding="1" cellspacing="1" border="1">            <tr>                <th scope="col"></th>                <th scope="col">Hoeveelheid</th>                <th scope="col">Gewicht x KG</th>            </tr>            <tr>                <td>1</td>                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>            </tr>            <tr>                <td>2</td>                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>            </tr>            <tr>                <td>3</td>                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>            </tr>        </table>    </div>        <button onclick ="window.location.href = '#close';getData(); writeData(); " href="#close" id="submitButton" class="tester2"> Submit </button><p>    <ol id ="exerciseList">    </ol></p>我的JS：const exerciseName = document.getElementById("exercise-search");function gotData(data){//console.log(data.val()); var exercise = data.val(); console.log(exercise); console.log(exercise.hoeveelheidKilogram);exercise.repetitie.forEach(function getReps (value) {    console.log(value);}); exercise.hoeveelheidKilogram.forEach(function(value) {    console.log(value);});for (var i = 0; i < HoeveelheidArr.length; i++) {    var li = document.createElement('li',exerciseName.value );    li.parent('exerciseList'); }} 

Answer 1

考虑到这一点，

“parent()”是属于 jQuery 对象（也称为“Wrapped set”）的方法，它是 jQuery 选择器的返回类型。因此，parent() 函数只能与 jQuery 对象一起使用。“document.getElementById()”是一个纯javaScript函数，它返回DOM元素（元素不是jQuery对象）。这样我们就不能使用parent()方法了。这就是您收到此错误的原因。

（但是在您的代码中：您尝试选择动态创建的元素。动态创建的元素没有父元素，直到我们将该元素放置到 DOM 中）

您可以从控制台日志代码中发现两个函数的返回类型之间的差异。

var elem_1 = document.getElementById("exerciseList"); // js element selector

console.log(elem_1); // outputs DOM element

var elem_2 = $("#exerciseList"); // jQuery element selector

console.log(elem_2); // outputs jQuery object (Wrapped set)

如果您需要将列表项添加到有序列表中（

）然后使用以下代码作为参考。

/**

 * I don't know what is inside the variable "HoeveelheidArr"

 */

for (var i = 0; i < HoeveelheidArr.length; i++) {

    var li = document.createElement('li');

    li.setAttribute('id', "id_name");

    var text = document.createTextNode(exerciseName.value);

    document.getElementById("exerciseList").appendChild(li);

}

如果您需要使用parent()函数，请参考以下代码：

// selects the immediate parent of element with id value "selected_id"

$("#selected_id").parent('div'); 

谢谢。