appendTo 不执行js文件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了appendTo 不执行js文件相关的知识，希望对你有一定的参考价值。

<script language="javascript">
var j1=$("<script src='js/1.js'>\</script\>");
var j2=$("<script src='js/2.js'>\</script\>");
var c1=$("<link rel='stylesheet' href='css/1.css'>");
var c2=$("<link rel='stylesheet' href='css/2.css'>");

function nandu1()

j1.appendTo("body");
j2.remove();
c1.appendTo("body");
c2.remove();

function nandu2()

j1.remove();
j2.append("body");
c1.remove();
c2.appendTo("body");

</script>

<input type="button" value="简单" onClick="nandu1()"/>
<input type="button" value="适中" onClick="nandu2()"/>

一个小游戏代码，目的是根据按钮加载不同的css和js，以便完成难度的改变，

代码运行以后，点击按钮修改难度，网页加载的css文件变了，但并没有加载新的js文件。。。
.appendTo("body"); 和 .remove(); 只对css起效，对js无效。。。

append(content)向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。appendTo(content)把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上，append(content)向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
appendTo(content)
把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

<html>
<head>
<script type="text/网页特效" src="js/jquery-1.3.2.js"></script>
<style type="text/css教程">
.changeP font-weight: bold; color:red;
</style>
<script type="text/javascript">
$(document).ready(function()
$("<div><p>Hello</p></div>").appendTo("body")

);
</script>
</head>
<body>
<form>
<input type="radio" value="Option">
</form>
</body>
</html>
. appendTo(content): 将所有匹配的元素添加到另一个特定的目标元素中(加入作为最后一个子节点)
2.prependTo():同样的, 将所有匹配的元素添加到另一个特定的目标元素中.(加入作为第一个子节点)
不难发现两者的区别了.以后,使用时要注意呦!
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("<p>data</p>").appendTo("body");
);

</script>
</head>
<body>

</body>
</html>
向htm元素增加模板
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("p").appendTo( $("b") );
);
</script>
<style>
.selected color:blue;
</style>

</head>
<body>
<body>
<b>asdf</b><p>asdf: </p>
</body>
</html>

如果appendTo没有生效，证明目标节点没有找到，请检查目标节点的取法是否正确。 参考技术A <script> 

    var oHead = document.getElementsByTagName('HEAD').item(0); 

    var oScript= document.createElement("script"); 

    oScript.type = "text/javascript"; 

    oScript.src="test.js"; 

    oHead.appendChild( oScript); 

</script>

注意，以上加载方式是异步的。

本回答被提问者采纳 参考技术B 删除link标签的话会影响页面效果。
但是删除js标签并不影响已经执行的js。追问

那应该怎么解决这个问题？或者说，怎么会让他重新加载js？

追答

应该写销毁的方法删除js中已经处理过的。而不是删除script标签。

Vue.js 教程 : 过渡动画

Vue.js 提供非常简单的过渡动画接口。这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行。能够触发动画的指令包括 v-if , v-show 和 v-repeat。同时，vm 实例的 $appendTo() , $before() , $after() 和 $remove() 方法也会触发动画。

定义动画的方法有三种：

  1. CSS transition

  2. CSS animation

  3. JavaScript 函数

CSS Transition

要使用 CSS Transition 动画，只需要在目标元素上添加 v-transition 指令：

<p class="msg" v-if="show" v-transition>Hello!</p>

然后，你需要为目标元素定义两个 CSS 类： .v-enter 和 .v-leave . 这其中：

  • .v-enter 代表元素刚刚被插入 DOM 瞬间的状态。它会在插入前被添加，然后 Vue.js 会强制浏览器刷新视图，然后 v-enter 会被立刻移除，从而触发 transition。

  • .v-leave 代表元素即将被从 DOM 中移除的瞬间的状态。Vue.js 会在侦听到 transitionend 事件以后移除它。

需要注意的是你得确保该元素在添加这两个类的时候会触发 CSS transition，不然 Vue.js 侦听不到 transitionend 事件，动画就卡在那里了。

.msg {    transition: all .3s ease;    height: 30px;    padding: 10px;    background-color: #eee;    overflow: hidden; }.msg.v-enter, .msg.v-leave {    height: 0;    padding: 0 10px;    opacity: 0; }

现在，当 show 变化的时候，Vue.js 会插入/移除该元素，并自动在合适的时候添加 CSS 类。

CSS Animation

CSS Animation 使用方式和 transition 大同小异，换成使用 v-animation 指令，不同的地方是 v-enter 现在不是在插入后立刻移除，而是在侦听到 animationend 事件后才移除。

<p class="animated" v-if="show" v-animation>Look at me!</p>

CSS 里你需要定义两个动画 keyframes，分别对应进场和出场动画：（这里省略了webkit前缀）

scale(0);    } }

JavaScript 函数动画

JS 函数动画需要通过 Vue.effect 方法来注册一个效果，包括一个进场函数和一个出场函数：

Vue.effect('my-effect', {    enter: function (el, insert, timeout) {        // insert() 会将元素插入 DOM    },    leave: function (el, remove, timeout) {        // remove() 会将元素移除出 DOM    } })
<p v-effect="my-effect"></p>

第三个参数 timeout 是一个 Vue.js 版本的 setTimeout 函数。使用方法完全一样，但使用这个函数的好处是，当一个元素的状态切换过快，上一个动画函数设置的 timer 还没有触发就进入下一个动画函数的时候， Vue.js 会确保之前未触发的 timer 都被取消，不需要开发者手动管理 timer。


过渡动效

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>  <router-view></router-view></transition>

<transition> 的所有功能 在这里同样适用。

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。

const Foo = {  template: `    <transition name="slide">      <div class="foo">...</div>    </transition>  ` }const Bar = {  template: `    <transition name="fade">      <div class="bar">...</div>    </transition>  ` }

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

<!-- 使用动态的 transition name --><transition :name="transitionName">  <router-view></router-view></transition>
// 接着在父组件内// watch $route 决定使用哪种过渡 watch: {  '$route' (to, from) {    const toDepth = to.path.split('/').length    const fromDepth = from.path.split('/').length    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'  } }


以上是关于appendTo 不执行js文件的主要内容，如果未能解决你的问题，请参考以下文章

基本 JS 文件加载但不渲染或执行 Laravel 8 Bootstrap 5

怎么重新加载js文件

我可以在 node.js 中要求一个函数而不执行整个所需文件吗？

EasyClick 运行无错误不执行代码

EasyClick 运行无错误不执行代码

Rails update.js.erb 不执行 javascript