Creating New HTML Elements in JavaScript get error in WordPress

Question

I want to show a message in element in page of wordpress(if parameter "message" in url have a value ).for this purpose i installed "Header and Footer Scripts" plugin.and write this code in "insert script to ":

<script>
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

if(getUrlParameter('message'))
{
const para = document.createElement("p");
const node = document.createTextNode(getUrlParameter('message'));
para.appendChild(node);

const element = document.getElementsByClassName("entry-content");
element.appendChild(para);

}
</script>

but not working. and get error :

?message=ثبت انجام شد:291 Uncaught TypeError: element.appendChild is not a function at ?message=ثبت انجام شد:291

note:I used embed code plugin instead of "Header and Footer Scripts" plugin.My problem was solved.

You seem to be having a few errors, please check your console. — StackByMe
– StackByMe, Commented Aug 24, 2021 at 6:51
Yes, that is what i expected. getElementsByClassName returns a collection not a single element. So you need to access its content via element[0].appendChild(para); or whatever index you need — StackByMe
– StackByMe, Commented Aug 24, 2021 at 8:14

mrJQuery · Accepted Answer · 2021-08-26 07:24:27Z

1

element = document.getElementsByClassName("entry-content") returns a nodelist of elements and not a single one. therefore calling element.appendChild(para) will not work.

You need to iterate over this nodelist. One possible way would be to use QuerySelectorAll instead of getElementsByClassName :

document.querySelectorAll('.entry-content').forEach(element => {
    element.appendChild(para);

})

edited Aug 26, 2021 at 7:24

answered Aug 24, 2021 at 8:18

mrJQuery

2412 silver badges10 bronze badges

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

1 Comment

Mohadeseh Over a year ago

thanks.error has been fixed.but out put is empty: <p> </p>

Collectives™ on Stack Overflow

Creating New HTML Elements in JavaScript get error in WordPress

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related