CODEWITHSUNDEEP
javascriptjquery
Irene T.
Irene T.

Reputation: 1393

Creating a div with jquery on the fly

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>

Upvotes: 0

Views: 153

Answers (2)

Irene T.
Irene T.

Reputation: 1393

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!

Upvotes: 0

mplungjan
mplungjan

Reputation: 177795

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

Upvotes: 1

Related Questions