li.parent is not a function

Question

I am trying to create a list based off of user input. However I keep getting the error :li.parent is not a function. How can is solve this and create a list of user input resutls?

This is what i tried, my 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>

My 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');
 }
}

I did look around a bit and read that it might have to do with library conflictions. However I dont see how, here are the libraries i use:

<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"
      type="text/css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="Workout.js" defer></script>

Should I take a different approach cant see what im doin wrong.

i think the javascript dom uses el.parentNode or el.parentElement properties - for el direct parent - not a function - you probably need a library for that - like jquery or document.querySelector("p").closest(".near.ancestor") https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-class — developer, Apr 02 '20 at 15:32
@HitE — The cosole tells you it **isn't** a function, but you typed `.parent()`: Why did you do that? What made you think that would work? — Quentin, Apr 02 '20 at 15:33

score 2 · Accepted Answer · answered Apr 02 '20 at 17:02

Consider this,

"parent()" is the method belongs to jQuery object(also known as "Wrapped set") which is the return type of jQuery selector. So that the parent() function is only usable with jQuery object. The "document.getElementById()" is a pure javaScript function that returns the DOM element (element is not a jQuery object). So that we cannot use the parent() method with it. That's why you are getting this error.

(But in your code: you try to select the element that you created dynamically. The dynamically created element don't have a parent until we place that element to the DOM)

you can find the difference between the return type of two function from the console log code.

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)

If you need to add list items to your ordered list (

) then use the following code for reference.

/**
 * 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);
}

If you ever need to use the parent() function then refer the following code:

// selects the immediate parent of element with id value "selected_id"
$("#selected_id").parent('div');

thank you.

li.parent is not a function

1 Answers1