Creating a div with jquery on the fly

Question

I am trying to create a div to handle some images but i don't want to append it to body section.

I want to use a js file that will hold my code so i can load it in my wordpress sidebar. Also my code checks if jquery is loaded and if it's not it will load it and run the code

My code is:

function myJQueryCode() {
    //Do stuff with jQuery
$(document).ready(function(){

$("body").append('<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div>');
//I don't want append it to body just to create it so it can holds the div bellow!

$('<div class="items" id="link_'+tsource1id+'" style="width:110px; height:100px; float:left; margin:20px; background-color:#333;"></div>').html('<a href="'+tsource1+'"><img src="'+tsource1img+'" width="600" height="350" alt="xxx" style="width:104px; height:94px; float:left; margin-left:3px; margin-top:3px;" width="104" height="94"></a>').appendTo('#theContentsm');

$('<div class="brief_'+tsource1id+'" style="width:110px; height:100px; float:left; margin-top:3px; padding-bottom:3px; text-align:center;"></div>').html(tsource1caption).appendTo('#link_'+tsource1id);

});
}

//Checking if jquery is loaded..
if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
    jqTag.onload = myJQueryCode;
    headTag.appendChild(jqTag);
} else {
     myJQueryCode();
}

And i will load it like this:

<script type="text/javascript" src="http://www.mydomain.com/scripts/myjavascript.js"></script>

@mplungjan when i am using the code to load the js file that holds the code, nothing appears.. Must i use the noConflict for jquery? — Irene T., Jan 27 '14 at 14:00
var tscource1id = "1"; & var tsource1 = "http://www.someurl.com"; and var tsource1img = "http://www.someurl/image.jpg"; and var tsource1caption = "Some caption"; — Irene T., Jan 27 '14 at 14:06
@RajeshDhiman i need only to create a div to append my content.. — Irene T., Jan 27 '14 at 14:20

score 1 · Accepted Answer · edited May 23 '17 at 10:25

Perhaps you mean

function myJQueryCode() {
  $(function(){
   $('<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div>')
    .append('<div class="items" id="link_'+tsource1id+'" style="width:110px; height:100px; float:left; margin:20px; background-color:#333;"></div>').html('<a href="'+tsource1+'"><img src="'+tsource1img+'" width="600" height="350" alt="xxx" style="width:104px; height:94px; float:left; margin-left:3px; margin-top:3px;" width="104" height="94"></a>')

   $('<div class="brief_'+tsource1id+'" style="width:110px; height:100px; float:left; margin-top:3px; padding-bottom:3px; text-align:center;"></div>').html(tsource1caption).appendTo('#link_'+tsource1id);

  });
}

and not all browsers support onload for script

'onload' handler for 'script' tag in internet explorer

i got this error in my console Uncaught ReferenceError: $ is not defined — Irene T., Jan 27 '14 at 14:09
My code works when i am include it in a local html file... is there any problem that i have the .js file in other domain/server? — Irene T., Jan 27 '14 at 14:22

score 0 · Answer 2 · answered Jan 27 '14 at 14:26

I Solved it.. I removed the line

$("body").append('<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div>');

And i create manual a div

<div id="theContentsm" class="theContentsm" style="width:100%; padding-bottom:5px;"></div>

and inserting my javascript bellow it!

Creating a div with jquery on the fly

2 Answers2