如何在我的 HTML 页面上使用 Javascript 定位 div 来更改元素的内容？

Question

我有一个有趣的问题。我是运行 Squarespace @ buscadprimero.caminoglobal.org 并且需要定位导航上的 top-right 按钮（Ingresar，这意味着登录）以调出通过嵌入代码提供给我的 Javascript 表单。当作为代码块包含在页面的 body 中时，代码本身工作正常，但 Squarespace 只允许顶部的导航按钮是 hyperlinks。我没有地方可以向按钮本身添加代码，因为它是一个主要面向消费者的平台，非常适合简单的应用程序，直到您尝试更改它的工作方式。

他们通过 "code injection" 菜单允许自定义代码，该菜单将您想要的任何代码添加到页面的 HTML header，所以我一直在尝试定位这个 div，它没有 id 但 class 是 external，用 Javascript 用 onclick 侦听器替换它的内容来调出这个表单.跟踪？

这是我的嵌入代码，就像我说的那样：

<script>// <![CDATA[
   !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>

我一直在尝试 document.getElementsByClassName("external").innerHTML;，但是当设置为 returns undefined 的 var 时。 Javascript 的新手，但不怕学习。首先，我想弄清楚如何正确定位 div，然后用 Javascript 函数替换其内容（目前是我的 404 页面的 link）单击即可激活。感谢指导！

Answer 1

我在 Chrome 中测试了您网站上的以下内容，并成功更改了内容。该页面包含多个“.collection”元素，所以我 select 只有最后一个：

JavaScript / jQuery

$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");

Answer 2

感谢@Arg0n 的大力帮助，我现在有了一个可以正常使用的登录表单，该表单出现在我网站的最右上角的按钮中。使用：

$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });

作为替换有问题的 div 内容的函数，我插入了 <span id='cc-login'>Ingresar</span> 作为对提供的嵌入代码的调用：

<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.ho‌st+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventLi‌stener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>

事实证明，稍微 jQuery 有助于访问所需的 div，而设置其 html 内容有点超出我的专业领域。

非常感谢 Whosebug 社区帮助我了解使用 Javascript 定位页面元素以按程序操作其内容。

如何在我的 HTML 页面上使用 Javascript 定位 div 来更改元素的内容？

How can I target a div on my HTML page with Javascript to change the contents of an element?

javascript

html

targeting