Why is this code not working to modify HTML

Question

I have implemented this code on my site:

$('.feed-item').append('<p> This is paragraph element. </p>');

on this page here: Test

however the code isn't working, it is definitely there as I can see it in the page source however nothing is happening. Could someone tell me what I'm doing wrong

Answer 1

Edit: I just noticed in your page jQuery is defined as jQuery and not as $.

In your page you have new lines in your string which causes the error. This:

$( document ).ready(function() {
    $('.feed-item').append('
<p> This is paragraph element. </p>
<p>');
});

should be:

jQuery( document ).ready(function() {
    jQuery('.feed-item').append('<p> This is paragraph element. </p>');
});

Answer 2

This is beacuse the DOM is not loaded.

$( document ).ready(function() {
    $('.feed-item').append('<p> This is paragraph element. </p>');
});

or put it at the bottom on the page after the HTML.

<p> is also not valid in script.

Answer 3

Try doing this

 $('.feed-item').append('</p><p> This is paragraph element. </p><p>');

Answer 4

please add this code snippet to footer.php before</html> tag and remove from your previous location

<script>
$('.feed-item').append('<p> This is paragraph element. </p>');
</script>