Javascript 使用文档写入编写jquery_Javascript_Jquery_Css

Javascript 使用文档写入编写jquery

javascript jquery css

Javascript 使用文档写入编写jquery,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试编写一个代码，它将从用户那里获取输入，并为输入创建一个可拖动的文件。我可以使用javascript编写HTML和CSS，但当我尝试对jquery做同样的事情时；它不起作用。我哪里做错了 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script sr

我正在尝试编写一个代码，它将从用户那里获取输入，并为输入创建一个可拖动的文件。我可以使用javascript编写HTML和CSS，但当我尝试对jquery做同样的事情时；它不起作用。我哪里做错了

<html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>         
    <script>
        function init() {
            var op=document.getElementById("inputo").value;
            document.write("<style>" + "#" + op + "{color:red; height:50px; width:50px; border:1px       solid black ; border-radius:100%; line-height: 50px; }" +"<br>" + "</style>");
            document.write("<h1 id=" + op + ">" + op + "</h1>");
            document.write("<script>" "<br>"+ " $(document).ready(function() { #op.draggable();});"  +"</script>");
        }
    </script>
    </head>
    <body>
        Draggable: 
        <input type="text" id="inputo"/>
        <input type="button" onClick="init()" value="submit"/>
    </body>
</html>


函数init（）{
var op=document.getElementById（“inputo”）.value；
文档。写入（“+”#“+op+”{颜色：红色；高度：50px；宽度：50px；边框：1px纯黑；边框半径：100%；线条高度：50px；}“+”
“+”）；
文件。写（“+op+”）；
document.write（“
”+“$（document）.ready（function（）{op.draggable（）；}）；“+”）；
}
可拖动：

您需要在

jquery ui.min.js

之前加载

jquery.min.js，并且*不嵌套脚本*s，因此您的
标记应该是：
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script>
    function init() {
    /*...SOME STUFF HERE*/
    } 
    </script>  
    </head>


函数init（）{
/*…这里有些东西*/
} 
您可以添加这样的标记，而不是document.write
 <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>   
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>   
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-    content/themes/jquery/css/base.css?v=1">

<script>
function init()
{
var op=document.getElementById("inputo").value;

var string = "<h1 class='test' style='color:red; height:50px; width:50px; border:1px solid black ; border-radius:100%; line-height: 50px;'>" + op + "</h1>";
$("#container").html(string);
$(".test").draggable();
}
</script>
</head>
<body>
Draggable: <input type="text" id="inputo"/>
<input type="button" onClick="init()" value="submit"/>

<div id="container"></div>

</body>
</html>


函数init（）
{
var op=document.getElementById（“inputo”）.value；
var string=“+op+”；
$（“#容器”）.html（字符串）；
$（“.test”）.draggable（）；
}
可拖动：
document.write（）
只能在页面最初呈现时调用，页面加载后调用它将用document.write（）覆盖DOM。您还试图从JavaScript字符串中运行函数，这是100%不起作用的。为什么它甚至在一根绳子里？将其移出并调用该函数。