Can I append a Javascript string to an HTML head element?

Question

I would like to add some Javascript to a HTML head like this:

var scriptInjection = "&lt;script type='text/javascript'/&gt;function toggleVisibility() {$('#ivuFrm_page0ivu1').contents().find('.tableContentRow').toggle()}&lt;/script/&gt;";
$('#ivuFrm_page0ivu1').contents().find("head").each(function(){
        console.log($(this).prop("tagName"))
        $(this).append(scriptInjection);
        });

This is only appending a string though and not the script element. How can I resolve this?

that's because you're not inserting html. you're inserting a text node. < means nothing to JS. if it was "<script...>", then it'd be seen as html. ditto for > — Marc B
– Marc B, Commented Aug 6, 2015 at 16:04

Shilly · Accepted Answer · 2015-08-06 16:09:40Z

7

var script = document.createElement('script');
script.textContent = "function toggleVisibility() {$('#ivuFrm_page0ivu1').contents().find('.tableContentRow').toggle()};";
$(this).append(script);

answered Aug 6, 2015 at 16:09

Shilly

8,5991 gold badge20 silver badges24 bronze badges

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

3 Comments

Hans En Over a year ago

This worked thanks I will except when time is up. Yet I still receive a "toggleVisibility is not defined" error if i click on the button in the body with the onClick = 'toggleVisibility()'. Any ideas on that?

Shilly Over a year ago

You probably have to rebind the function to the button After you insert the extra script tags, since the button won't refer to your new function yet.

dandavis Over a year ago

shouldn't $.append() already create the element if passed a string? i think it just needs un-encoded.

Kevin Boucher · Accepted Answer · 2015-08-06 16:18:52Z

2

In jQuery:

$('head').append(
    '<script>' +
        'function toggleVisibility() {' +
            '$(\'#ivuFrm_page0ivu1\').contents().find(\'.tableContentRow\').toggle()' +
        '}' +
    '<\/script>'
);

answered Aug 6, 2015 at 16:18

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Comments

Syam Danda · Accepted Answer · 2015-08-06 16:19:51Z

1

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onreadystatechange = function() {
// if (this.readyState == 'complete') { callFunctionFromScript(); }
}
script.src = 'your/path/to/-script.js';
head.appendChild(script);

answered Aug 6, 2015 at 16:19

Syam Danda

5873 gold badges12 silver badges36 bronze badges

1 Comment

dandavis Over a year ago

OP doesn't have an external script, adding via and dom methods won't execute the textContent, jquery internally uses eval() to do that.

Devmyselz · Accepted Answer · 2022-05-02 16:04:21Z

0

using vanilla js (no jquery)

var ajax = new XMLHttpRequest();
ajax.open("GET", "/yourpath/toyourfile.html", true);
ajaxInicial.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', this.responseText);}}
ajaxInicial.send();

answered May 2, 2022 at 16:04

Devmyselz

4585 silver badges14 bronze badges

Collectives™ on Stack Overflow

Can I append a Javascript string to an HTML head element?

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related