Using jQuery to override the content of a div [closed]

Question

I need to change a text content inside a contact form using jQuery, I know that the custom.js file that I'm using is connected as when I do a console.log I can see what I write.

When I select the paragraph that I need and change it's html content nothing happens, is it possible for the content to be overwritten by something later? Is there a way to prioritize my code?

jQuery("p.help-block.small").html("<p> ... </p>");

Answer 1

In some instances, I'll run a delayed init function in a setTimeout like this:

var delay = setTimeout(function() {
    jQuery("p.help-block.small").html("<p> ... </p>");
}, 100);

In the event that something is overwriting the html of that paragraph block on page load, this function will run 100 milliseconds after that, making yours the last change to the paragraph. 100 milliseconds is rather quick, so with other elements on the page loading, users may or may not notice the change.

I generally use this type of load with the elements hidden via CSS, and then fading them in when they've been "loaded" if there are a lot of elements that will will change in shape or size, e.g. going from three words to three paragraphs would make the page jump, so I may fade it in nicely instead.

Also, since you're calling .html() on the paragraph element, you don't need to include the paragraph tags within since the html you would be setting is already wrapped by paragraph tags. If you're just changing text, you could use .text() instead. However, if you're including line breaks or span elements within the paragraph, then .html() would be appropriate.

Answer 2

Have you tried to wrap it into the jQuery() function?

jQuery(function(){
  jQuery("p.help-block.small").html("<p> ... </p>");
})

This will cause the code to run one the page is loaded, so that every script has already been parsed&run.

Answer 3

You could try calling the "custom.js" file at the bottom of your page. This means the HTML and CSS should load first then will get overwritten by the script. You could also do a window.alert() to test that your code inside of JQuery is running correctly.