如何使用jQuery将样式表和javascript文件动态添加到div元素

Question

I am displaying json data to a dynamically generated div element to which I want to add stylesheet and javascript files. 我正在向动态生成的div元素显示json数据，我想要添加样式表和javascript文件。

Styling and javascript functionality to the json data are applied by many different .css and .js files so I want to add those files to the div element being used to the json data. json数据的样式和javascript功能由许多不同的.css和.js文件应用，因此我想将这些文件添加到用于json数据的div元素中。

If I add these files to the jsp page itself where the <div> element has been added to display the json data the data does not get styled. 如果我将这些文件添加到已添加<div>元素以显示json数据的jsp页面本身，则不会对数据进行样式设置。

Does jquery provide and methods to achieve the same? jquery是否提供了实现相同的方法？

What I am trying to do is same as adding the following to a jsp/html page: 我想要做的就是将以下内容添加到jsp / html页面：

<link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles1.css" />" />
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles2.css" />" />

<script type="text/javascript" src="<c:url value="/resources/script1.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/script2.js" />"></script>

Thanks. 谢谢。

EDIT: 编辑：

billboard.jsp billboard.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/default.css" />" />

    <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.5.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/billboard.findDataById.js" />"></script>

    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles1.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles2.css" />" />

    <script type="text/javascript" src="<c:url value="/resources/script1.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/script2.js" />"></script>
    <script type="text/javascript">
         highlighter.all();
    </script>
</head>
<body>

    <div id="billboard">        
        <input id="id" type="text" name="id"></input>
        <input type="button" onclick="findDataById()" value="find"></input>     
    </div>
    <div id="result"></div>

</body>
</html>

billboard.findDataById.js billboard.findDataById.js

function findDataById() {
    $.ajax({
        url:            "/domain/retrieveData",
        data:       "id=" + $("#id").val(),
        success:    function(data) {
                            $("#result").html(data.dataToBeDisplayedInsideDiv);
                        },
        async:      false,
        dataType:   "json"
    }); 
}

When the data is added dynamically to the <div id="result"></div> I am getting the <div id="result"></div> styled with <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.5.js" />"></script> but not the other .css and .js files. 当数据动态添加到<div id="result"></div>我得到的<div id="result"></div>样式为<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.5.js" />"></script>但不包括其他.css和.js文件。

Answer 1

consider this: How do I include a JavaScript file in another JavaScript file? 考虑一下：如何在另一个JavaScript文件中包含JavaScript文件？

The similar concept is used for including stylesheets too! 类似的概念也用于包括样式表！

Answer 2

You may rely on a good js lib for this. 您可能需要依靠良好的js库。

Look at script loading presented in this post: http://addyosmani.com/blog/tools-for-jquery-application-architecture-the-printable-chart/ 看看这篇文章中提到的脚本加载： http ： //addyosmani.com/blog/tools-for-jquery-application-architecture-the-printable-chart/

Some are heavier/more complete than others, so you will have to compare. 有些比其他的更重/更完整，因此您必须进行比较。

Answer 3

Adding a stylesheet / javascript to the <head> as follows : 将样式表/ javascript添加到<head> ，如下所示：

jQuery : jQuery：

$('head').append(....);

JavaScript : JavaScript：

document.getElementsByTagName('head')[0].appendChild(....);

如何使用jQuery将样式表和javascript文件动态添加到div元素

问题描述

3 个解决方案

解决方案1
1 2012-02-23 13:45:50

解决方案2
1 2012-02-23 14:10:07

解决方案3
1 2012-02-23 14:18:20

如何使用jQuery将样式表和javascript文件动态添加到div元素

问题描述

3 个解决方案

解决方案1 1 2012-02-23 13:45:50

解决方案2 1 2012-02-23 14:10:07

解决方案3 1 2012-02-23 14:18:20

解决方案1
1 2012-02-23 13:45:50

解决方案2
1 2012-02-23 14:10:07

解决方案3
1 2012-02-23 14:18:20