wordpress：如何使用JS更改动态生成的div的innerHTML？ 错误：“无法将属性innerHTMl设置为null”

Question

我正在尝试在Wordpress / Woocommerce上使用动态生成的div类更改“查看购物车”按钮的innerHTML。 我问了一个关于此的先前问题，并被建议（谢谢Mike :)），因为JS是一个onload事件，该类仅在用户单击“添加到购物车”按钮后才更改，因此js不会及时运行。

我需要知道如何在任何人看到它之前更改“查看购物车”按钮的innerHTML。 我想更改“查看购物车” --->“查看猫”的字眼。

这是我的网站： http : //woocommerce-8778-19565-47619.cloudwaysapps.com/product-category/jewelry# 。 请点击“添加到购物车”，然后看到“查看购物车”按钮出现。

我写了一些非常基本的JS：

   1. window.onload = function viewcart(){
   2.   document.querySelectorAll('.added_to_cart').innerHTML="view cats";
   3.  //  document.querySelector('a.added_to_cart.wc-forward:before').innerHTML="view cats";
   4. //  document.getElementsByClassName('.wc-forward::after').innerHTML="view cats";
   5. }

3-4是我尝试解决此问题的一些方法的示例。

有时会出现“无法设置属性'innerHTML'为null”的消息，但有时却没有。 Element Inspector显示JS正在加载！

我按顺序执行的操作（步骤1，步骤2，步骤3）： 1.通过将外部js工作表（viewcart.js）添加到带有STFP的子主题文件中，将js加载到我的Wordpress中（ 使用CHILD主题 ）。

2. 在CHILD主题的functions.php中添加了以下内容：

    <?php add_action( 'wp_enqueue_scripts', 'child_add_scripts' ); function child_add_scripts() { wp_register_script( 'viewcartscript', get_stylesheet_directory_uri() . '/viewcart.js', true, false ); wp_enqueue_script( 'viewcartscript' ); } ?> 

3. 尝试将true更改为false并从php函数中删除“ true” /“ false”之一。

我将比上一个问题（2天前）更快地选择最佳答案。 预先感谢您的任何帮助。 你们确实是最好的xo :)

Answer 1

Document.querySelectorAll（'button.added_to_cart'）返回文档中与“ .added_to_cart”匹配的选择器的列表（节点列表）。 正如Ian所说，最好的方法是循环此列表，并逐一更改其元素的内部html。 CSS伪类将永远不会返回任何元素。 编辑：您还可以使用var elements = document.getElementsByClassName（'added_to_cart'）; 对于（var i = 0; i <elements.length; i ++）elements [i] .innerHtml ='view cats';