Question

首先，我读过Can't append <script> element，在阅读之后，利用它所说的，我已经达到了一个不同的问题：是的，它向我展示了如何插入脚本标签但是它“擦除”页面的其余部分：

我想使用jQuery添加计数器计时器脚本。在id =“counter”pargraph之后然后在那个地方插入一个“柜台”：所以代替这段代码：

<body>

<p> beginning of site</p>

<table id="timer_table">
    <tbody>
        <tr>
            <td>
                <p id="counter"  style="color: red;"> Here's the counter: </p>

            </td>
        </tr>
    </tbody>
</table>

<p> rest of site...</p>

</body>

我会得到这段代码：

<body>

<p> beginning of site</p>

<table id="timer_table">
    <tbody>
        <tr>
            <td>
                <p id="counter"  style="color: red;"> Here's the counter: </p>
                <script>
                    var myCountdown1 = new Countdown({time:316});
                </script>
            </td>
        </tr>
    </tbody>
</table>

<p> rest of site...</p>

</body>

添加脚本的位置将显示新的倒计时。我是通过使用firebug控制台来实现的，我正在运行它:(在Can't append <script> element写的，很难，它仍然不能很好地工作）

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "js_folder/js1.js";
$('#counter').after(script);

js1.js是简单的：

var myCountdown1 = new Countdown({time:316});

效果不佳。而不是得到这个结果：http://bit.ly/19Ve9oM 我得到了这个：http://postimg.org/image/np8y4spbx/

当我尝试检查页面源时，我什么都没得到。

总结一下：如何在id =“counter”段后使用jquery插入coundown？ 并且它会像原始html已经写入此行一样有效。

另外，我无权访问该页面的html源代码。如果我有，我会自己添加它，它会很好，就像在第一张图片链接中所示。因此我被迫使用Jquery。

你可以在这里试试（使用第二个链接进行尝试）：
这就是我想要的：http://jsfiddle.net/JxLwM/
但是用jquery做这件事：http://jsfiddle.net/F5rwK/5/
注意，在第二个链接中，尝试添加

var myCountdown1 = new Countdown({time:316});

在ss1中

，看看会发生什么。谢谢。

Answer 1

使用倒计时器中的代码将其插入正确的位置，而不是尝试插入脚本标记。有关工作示例，请参阅http://jsfiddle.net/F5rwK/7/。

关键部分是在HTML中添加容器（在示例中，它是ID为div的{{1}}。

因此HTML变为（在运行JS代码以插入div之后）

target_location

然后是JS（添加新div然后运行倒计时）

<body>

<p> beginning of site</p>

<table id="timer_table">
    <tbody>
        <tr>
            <td>
                <p id="counter"  style="color: red;"> Here's the counter: </p>
                <div id="target_location"></div>
            </td>
        </tr>
    </tbody>
</table>

<p> rest of site...</p>

</body>

Answer 2

另外，我无权访问该页面的html源代码。

那真是太可惜了。如果你不能做@Blair McMillan的建议，你也可以选择一种我认为不那么漂亮/直接/多功能/有用的方法：

var html = $("body").html();
var str = html.split(/<p id="counter" style="color: red;"> Here's the counter:/g);
new Countdown({time:99999999});
$("body").prepend(str[0] + '<p id="counter" style="color: red;"> Here\'s the counter:');
$("body").append(str[1]);

小提琴：http://jsfiddle.net/charlescarver/F5rwK/8/

我在做什么？

捕获页面的HTML
将其拆分到要显示计数器的位置。这是非常丑陋的部分，因为我匹配容器元素和文本的确切HTML。基本上就是出现在它之前的元素。
然后我加载计数器，清除页面的HTML
您预先添加了HTML的前半部分以及我们在第2步中匹配的字符串
您附加了下半部分，成功包含了原始HTML的倒计时

缺点？许多。这根本不是通用的。您必须在要显示倒计时之前匹配位置的确切文本，这只允许它在非常特定的情况下工作。另外，我只记得jQuery自动填充标签，所以这只会将计数器包装在完整的标签中。

希望这能告诉你总有其他方法可以做，而且你也可以改进这个方法！

使用jquery添加倒计时。搞砸了这个页面。我究竟做错了什么？

2 个答案: