jQuery inserting html as text instead of DOM object

Question

I'm trying to insert a DOM element using jQuery but it keeps being inserted as text instead.

var newImg = "<h1>Hi</h1>";
    $("li").each(function myFn(){
        this.addEventListener("mouseover", function myFn2 () {
                             this.before(newImg);
                              })
    });

Side note, the each is unnecessary. $('li').on('mouseover', function () { ... }); would perform the same function — Taplar
– Taplar, Commented Dec 6, 2017 at 19:48

Taplar · Accepted Answer · 2017-12-06 19:54:53Z

1

If you console.log(this) you should find that it is not a jQuery object inside the event handler. You will want to wrap it with $() before you use the before method to use the jQuery method.

$(this).before(newImg);

var newImg = "<h1>Hi</h1>";
$("li").each(function myFn() {
  this.addEventListener("mouseover", function myFn2() {
    $(this).before(newImg);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Wee</li>
</ul>

edited Dec 6, 2017 at 19:54

answered Dec 6, 2017 at 19:50

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

2 Comments

Nick Fusaro Over a year ago

That does make it an object, but it displays on the page as [object Object] now

Taplar Over a year ago

The code snippet in the answer doesn't insert [object Object] so something you are doing is different.

Collectives™ on Stack Overflow

jQuery inserting html as text instead of DOM object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related