在运行中使用jquery创建div

时间:2014-01-27 13:55:44

标签: javascript jquery

我正在尝试创建一个div来处理一些图像,但我不想将它附加到正文部分。

我想使用一个将保存我的代码的js文件,以便我可以在我的wordpress侧边栏中加载它。 此外,我的代码检查是否加载了jquery,如果不加载,它将加载它并运行代码

我的代码是:

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();
}

我会像这样加载它:

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

2 个答案:

答案 0 :(得分:1)

也许你的意思是

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);

  });
}

并非所有浏览器都支持脚本的onload

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

答案 1 :(得分:0)

我解决了.. 我删除了

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

我创建手册div

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

然后插入我的javascript吧!