Using Javascript to create a element and then adding it to section

Question

What I am trying to accomplish is use javascript to write a element in the section. The link element that i'm trying to add looks like this

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald&effect=neon">

As requested I've posted the entire code.:

<!doctype html>
<html>
<head>
    <title>Extra-Life Alerts</title>
    <meta charset="utf-8">
    <link href="singleAlert.css" rel="stylesheet">

    <script>
        var effect = $.url().param('effect');
        var font = $.url().param('font');
        /*
         //document.getElementById("body").innerHTML = document.write('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=' + font + '&effect=' + effect +'">');
         //document.getElementById('head').innerHTML += '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family="' + font + '"&effect="' + effect + '"">';
         //var stylesheetAdd = '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family="' + font + '"&effect="' + effect + '"">';

         $(function() {
         $('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family="' + font + '"&effect="' + effect + '""/>');
         });

         //var headID = document.getElementsByTagName("head")[0];
         //$(headID).append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family="' + font + '"&effect="' + effect + '"">');
         //document.getElementById('#posts').className = 'font-effect-' + effect;
         //document.getElementById('#posts').style.fontFamily = font;
         //$("#posts").className("font-effect-" + effect).style.fontFamily(font); //= 'font-effect-' + effect;
         //$("#posts").style.fontFamily(font); //= font;
         //if (font) { $('.wf-active body, .wf-inactive body, #posts, body').css('font-family', font); }
         //else{font="Impact"; $('.wf-active body, .wf-inactive body, #posts, body').css('font-family', font);}
         */
        /*
        //$('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family="' + font + '"&effect="' + effect + '""/>');
        var stylesheetAdd = '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family="'+font+'"&effect="'+effect+'"">';
        //$('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald&effect=neon" />');
        $(stylesheetAdd).appendTo(document.head);
        */

        var headID = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = 'http://fonts.googleapis.com/css?family=Oswald&effect=neon';
        headID.appendChild(link);

        /*
        var link = $('<link />')
            .appendTo(document.getElementsByTagName('head')[0])
            .attr('rel', "stylesheet")
            .attr('type', "text/css")
            .attr('href', "http://fonts.googleapis.com/css?family=Oswald&effect=neon");
        $(function(){
           $(link);
        });
        */
    </script>

    <!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald&effect=neon">-->
</head>
<body>
<!--<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>-->
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="./javascript/jQuery-url-parser/2.3.1/purl.js"></script>
<script src="./javascript/dropzone/dropzone.js"></script>

<script>
    var checkPriorDonorName = "prior name";
    var getCurrentDonorName = "current name";
    var checkPriorMessage = "prior message";
    var getCurrentMessage = "current message";

    function init() {

        // Parse setup parameters.
        var id = $.url().param('id');
        var audio = $.url().param('audio');
        var playAudio = document.createElement("AUDIO");

        var xmlhttp = new XMLHttpRequest();
        //var url = "http://2dc8c656ef.test-url.ws/tempDonations.txt";
        var url = "http://www.extra-life.org/index.cfm?fuseaction=donorDrive.participantDonations&participantID=" + id + "&format=json";
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        xmlhttp.onreadystatechange = function () {
            getCurrentDonorName = xmlhttp.responseText;
            getCurrentMessage = xmlhttp.responseText
        };
        getCurrentDonorName = JSON.parse(getCurrentDonorName);
        getCurrentMessage = JSON.parse(getCurrentMessage);

        xmlhttp.onreadystatechange = function () {
            if ((xmlhttp.readyState == '4' && ( xmlhttp.status == '200' || xmlhttp.status == '204' )) &&
                    ( checkPriorDonorName === "prior name" || getCurrentDonorName[0].donorName != checkPriorDonorName ) &&
                    ( checkPriorMessage === "prior message") || getCurrentMessage[0].message != checkPriorMessage) {
                extraLifeAlert(xmlhttp.responseText);
            }
            else
                return;
        };

        /** Debugging steps
         console.log("TEST BEGINNING NAME:   Current: " + getCurrentDonorName[0].donorName + " | Prior: " + checkPriorDonorName);
         console.log("TEST BEGINNING MESSAGE:   Current: " + getCurrentMessage[0].message + " | Prior: " + checkPriorMessage);
         */

        function extraLifeAlert(response) {
            var donorName = JSON.parse(response);
            var message = JSON.parse(response);
            var donationAmount = JSON.parse(response);

            if (donorName[0].donorName) {
                $('#posts').find('.donorName').text(donorName[0].donorName);
            }
            if (donationAmount[0].donationAmount) {
                $('#posts').find('.donationAmount').text(donationAmount[0].donationAmount);
            }
            if (message[0].message !== null) {
                $('#posts').find('.message').text(message[0].message);
            }
            else {
                $("#posts").find(".message").text("");
            }

            //setTimeout(function(){document.getElementById('#posts').attr('style', 'display: none')}, 0);
            //setTimeout(function(){document.getElementById('#posts').attr('style', 'display: inline')}, 2000);
            setTimeout(function () {
                document.getElementById('#posts').style.display = 'none'
            }, 0);
            setTimeout(function () {
                document.getElementById('#posts').style.display = 'inline'
            }, 2000);
            if (audio) {
                playAudio.setAttribute("src", audio);
                playAudio.load();
                playAudio.play();
            }
            setTimeout(function () {
                $("#posts").fadeIn(1000);
            }, 1000);
            setTimeout(function () {
                $("#posts").fadeOut(1000);
            }, 10000);

            checkPriorDonorName = donorName[0].donorName;
            checkPriorMessage = message[0].message;
        }
    }
    /** Debugging steps
     console.log("TEST END NAME:   Current: " + getCurrentDonorName[0].donorName + " | Prior: " + checkPriorDonorName);
     console.log("TEST END MESSAGE:   Current: " + getCurrentMessage[0].message + " | Prior: " + checkPriorMessage);
     */
    setInterval(init, 5000);
</script>

<div id="posts" style="display:none;font-family: Oswald;" class="font-effect-neon">
    <div id="donationMessage"><span class="donorName"></span>&nbsp;Just donated&nbsp;$<span class="donationAmount"></span>.00&nbsp;-&nbsp;<span class="message"></span></div>
</div>
<!--
<script>
    $("#posts").addClass = ( "font-effect-" + effect );
      /*.style.fontFamily(font);/*
     .style.fontFamily(font); //= 'font-effect-' + effect;
     $("#posts").find(".messages").append( $("#posts").hasClass("font-effect-neon").toString() );
     */
</script>
<!--
<script>
    //var font = $.url().param('font');
    //var reload = $.url().param('reload', false);
    //var reloadTime = $.url().param('reloadTime');

    /* Load Googles Webfont API*/

    WebFont.load({
        google: {
            families: [font]
        }
    });

    if (font) {
        $(".wf-active body, .wf-inactive body, #posts").css("font-family", font);
    }
    else {
        font = "Impact";
        $(".wf-active body, .wf-inactive body, #posts").css("font-family", font);
    }

    //if(reload){setInterval(function(){location.reload(true);}, reloadTime);}
</script>-->
</body>
</html>

Opps think i cut and pasted out some stuff. So the only think that matters to get this google font+effects to work is that 1)you add the tag in the , 2)add the font & effect class in the section where your text is. For right now i'm manually entered it in for testing purposes. I plan to control all this via script so that the user can put the options in the url and have it work.

What does this other code look like? It would be helpful to see that too. — BurningLights, Oct 29 '15 at 01:32
Where in the file is that code located? This works fine for me on jsfiddle: http://jsfiddle.net/davelnewton/ny9xte5j/ . — Dave Newton, Oct 29 '15 at 01:35
Why the over-complicated `headID`? Just use `document.head`. — Sebastian Simon, Oct 29 '15 at 01:35
@DaveNewton I've posted the entire .html code. TBH though, the only parts that matter are when it's called in the tag and then down in the
tag i have to add a font-family and class to have the effect fully work. — EffOfX, Oct 29 '15 at 01:46
Why are you trying to use JS to add a link in the head section ***from the head section*** ?? why not just use your link tag ??? — Anonymous0day, Oct 29 '15 at 01:47
Right now it's for testing purposes. I want to add the font and effect to be variables that the user adds in. — EffOfX, Oct 29 '15 at 01:49
when you open your debugger can you see the link in the html ? — Anonymous0day, Oct 29 '15 at 01:54
Have you tried putting it in a `$(document).ready()` event handler? Or, if you want the stying to be visible as the page loads, have your tried putting the script block right after the head? — BurningLights, Oct 29 '15 at 02:01

score 18 · Accepted Answer · edited Apr 02 '22 at 15:15

18

This is working :

    var fontLoader = function (param) {
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';

        //link.href = 'http://fonts.googleapis.com/css?family=Oswald&effect=neon';
        document.head.appendChild(link);

        link.href = 'http://fonts.googleapis.com/css?family=' + param.family + '&effect=' + param.effect;


    };

    fontLoader({
        family: 'Oswald',
        effect: 'neon'
    });

.normal , .oswald {
   padding : 3px;
   margin  : 3px;
   color : #333;
   border : solid 1px #CCC;
   font-size : 2em;
  
}
.oswald {
 
  font-family:'Oswald';

}

<div class='normal'>Normal Style</div>
<div class='oswald'>Oswald Style</div>

Just try this code at the end of your body.

edited Apr 02 '22 at 15:15

Smart Manoj

5,230
4
34
59

answered Oct 29 '15 at 02:02

Anonymous0day

3,012
1
14
16

So what i did was just add my own code at the bottom of my tag and guess what, it freakin works!! WTH mang?? Thats odd to me, but i'll take it. Without your suggestion, i wouldn't have figured it out! – EffOfX Oct 29 '15 at 02:19
1

Great, glad to help you. I think the main issue come from `var headID = document.getElementsByTagName('head')[0];` and my comment about `...add a link in the head section from the head section...` there is no TagName('head')[0] before the code reach ``, i am not sure of that but it is a theory – Anonymous0day Oct 29 '15 at 02:25
4

is there a reason why you append the element before setting the link? – RisingSun Jul 11 '19 at 19:19
https://stackoverflow.com/a/46994943/5033247 – Smart Manoj Apr 02 '22 at 15:18

Using Javascript to create a element and then adding it to section

1 Answers1