1

I have a dynamic unordered list in my HTML. When I load the file some list items are added in . The format of my is like this when a page is loaded.

<ul class="ui-front">
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
</ul>

Now I am running a function when the page loads the first child of list item get removed and I am trying to add my custom HTML in the list item. This is my code for it

$('.ui-front').on('DOMNodeInserted', 'li', function(e) {
    var arjuna="e.target.firstElementChild.innerHTML";
    e.target.removeChild(e.target.childNodes[0]);


    $(e.target).append('<hr style="margin-top:7px;margin-bottom:7px">');
});

According to this function when a new list item is inserted then this method calls. But this gives me an error

Uncaught RangeError: Maximum call stack size exceeded

When I remove the function .append. Everything works fine means elements get remove but whenever I add .append it gives me error. Any kind of help would be appreciated

Improve this question

3 Answers 3

Reset to default
4

You are getting that error because your event is firing on :

$('.ui-front').on('DOMNodeInserted', 'li', function(e)

Once you append a new node to the DOM, it will keep re-firing your event. This is why it's exceeding the call stack.

"The DOMNodeInserted event is similar to the DOMNodeInsertedIntoDocument event, but it occurs when a node is added to an element."

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Can u give me a solution actually I m trying to replace the html of list item with my html
If you are just trying to adjust styling, then assign classes with CSS and depending on how you want your changes made, add/remove the classes for dynamic styling with your event listener. You don't need to append nodes to the DOM to accomplish design changes.
let me tell u whole story i have an input type search when i change the search input value the suggestion list loaded .. I am just trying to change design of that suggestion list
2

$(e.target).append is triggering a DOMNodeInserted event. It's an infinite loop.

Improve this answer

4 Comments

Can u give me a solution actually I m trying to replace the html of list item with my html
I don't know enough about your end goal to thoroughly help, but I would look in to CSS to make what appears to be borders/underlines. There are first element selectors, last element selectors, and borders that I think could be composed to get what you're after.
let me tell u whole story i have an input type search when i change the search input value the suggestion list loaded .. I am just trying to change design of that suggestion list
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> I used this library
0

The cause of your issue being clear now from the other answers, a possible solution for your use case is to remove the event listener after first execution (if indeed you only want the event handler to execute once). Something like:

$('.ui-front').on('DOMNodeInserted', 'li', function(e) {
    var arjuna="e.target.firstElementChild.innerHTML";
    e.target.removeChild(e.target.childNodes[0]);

    //disables the event handler after first execution
    $('.ui-front').off('DOMNodeInserted');

    //now this won't fire the event anymore :)
    $(e.target).append('<hr style="margin-top:7px;margin-bottom:7px">');
});

More info in this SO question.

Edit: I'm not exactly sure about your desired output, but if all you are doing is inserting a horizontal line below below the target <li>, then this is definitely doable using CSS only (think border-bottom, text-decoration: underline, or similar).

Improve this answer

1 Comment

no this is not my exactly output... but i tried your it didn't work as well

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.