1

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

我想使用 jQuery 添加计数器计时器脚本。就在 id="counter" 段落之后，然后在那个位置插入一个“计数器”：所以而不是这个代码：

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

并且在添加脚本的地方会显示一个新的倒计时。我通过使用萤火虫控制台来做到这一点，我正在运行这个：（写在不能附加 <script> 元素，很难，它仍然不能很好地工作）

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/

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

总结一下：如何使用 jquery 在 id="counter" 段落之后插入计数？并且它会像原来的 html 已经写了这一行一样工作。

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

您可以在这里自己尝试（使用第二个链接进行尝试）：
这就是我想要的：http: //jsfiddle.net/JxLwM/
但是用 jquery 来做：http: //jsfiddle.net/F5rwK/5/
注意，在第二个链接中，尝试放置

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

在 ss1 中，看看会发生什么。谢谢你。

4

2 回答 2

2

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

关键部分是将容器添加到您的 HTML（在示例中，它的divID 为target_location.

于是 HTML 变成了（运行 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>

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

$('#counter').after('<div id="target_location"></div>');
var myCountdown1 = new Countdown({time:316, target:'target_location'});
于 2013-07-03T01:00:53.710 回答
0

另外，我无权访问该页面的 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/

我在做什么？

  1. 捕获页面的 HTML
  2. 将其拆分到您希望计数器出现的位置。这是非常难看的部分，因为我正在匹配容器元素的确切 HTML 以及文本。基本上，出现在它之前的元素。
  3. 然后我加载计数器，清除页面的 HTML
  4. 您预先添加 HTML 的前半部分，以及我们在步骤 2 中匹配的字符串
  5. 您追加后半部分，使用原始 HTML 成功包含倒计时

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

希望这向您表明，总是有替代的方法来做事，您也可以改进这一点！

于 2013-07-03T01:17:45.827 回答