如何将新的/更新的 innerHTML 附加到没有类或 ID 的 ap 标签？

Question

我正在写一个测试脚本，我想在表单中选择一个现有的 p 标签并更新正在使用的副本。 我无法访问原始代码，只能使用 JavaScript 进行更新，直到得到客户的技术负责人和测试结果的批准。

我的原始代码是：

var p = document.querySelector(".form-bg form p").innerHTML;

p.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.';

但是，p 标记的内容并未更新，并且遇到了说明代码未定义或不是函数的障碍。

因此，我尝试将 .appendChild() 与创建新元素并在无法更新现有副本时隐藏现有元素的思考过程一起使用。

我使用 .appendChild() 更新的代码是：

let updatedCopy = document.createElement('p');

updatedCopy.id = 'testCopy';

updatedCopy.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company';

document.getElementsByClassName('form-bg').appendChild(updatedCopy);

我试过在浏览器中运行它，但还没有成功。 任何指导将不胜感激！ :)

最后，这是包含需要修改的表单的 HTML 片段：

<div id="lightbox_shell">
    <div class="test-w_contact-lightbox-individuals">
        <div class="form-main-bg">
            <div class="close-bg">
                <button class="close" type="button">close</button>
            </div>
            <!-- Form Starts Here -->
            <div class="form-bg">
                <div class="legend">
                    Provide your information so an agent can reach you.
                </div>
                <form method="post">
                    <input name="offering" type="hidden" value="Individual"> <input name="language" type="hidden" value="English">
                    <div class="contact-fields">
                        <div class="flex_columns">
                            <div class="flex_2col">
                                <span class="input-text firstname" data-manual="1"><input class="required" id="firstname" maxlength="150" name="firstname" placeholder="First Name *" title="First Name" type="text"></span>
                            </div>
                            <div class="flex_2col">
                                <span class="input-text lastname" data-manual="1"><input class="required" id="lastname" maxlength="150" name="lastname" placeholder="Last Name *" title="Last Name" type="text"></span>
                            </div>
                            <div class="clearfloat"></div>
                        </div>
                        <div class="flex_columns">
                            <div class="flex_2col">
                                <span class="input-text phone" data-manual="1"><input class="required" id="phone" maxlength="12" name="phone" placeholder="Phone Number *" title="Phone Number" type="tel"></span>
                            </div>
                            <div class="flex_2col">
                                <span class="input-text zipcode" data-manual="1"><input class="required" id="zipcode" maxlength="5" name="zipcode" placeholder="Zip Code *" title="Zip Code" type="tel"></span>
                            </div>
                            <div class="clearfloat"></div>
                        </div>
                        <div class="flex_columns">
                            <div class="flex_2col">
                                <span class="input-text email" data-manual="1"><input class="required" id="email" maxlength="255" name="email" placeholder="Email *" title="Email" type="email"></span>
                            </div>
                            <div class="flex_2col">
                                <div class="requirement-info">
                                    * fields are required
                                </div>
                                <ul class="misc">
                                    <li>
                                        <p>Would you like an agent to call asap?</p><label class="checkbox"><input name="yesmeet" type="checkbox"> Yes</label> <label class="checkbox"><input name="nomeet" type="checkbox"> No</label>
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfloat"></div>
                        </div>
                    </div>
                    <p style="font-size: 13px;line-height: 100%;margin: 15px 0 14px;">By hitting submit, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.</p>
                </form>
            </div>
            <div class="raq-complete-panel">
                <div class="thanks">
                    <div class="title">
                        Thank You!
                    </div>
                    <p>An agent will call you<br>
                    <span class="eta">within 15 minutes.</span></p>
                </div>
                <div class="info">
                    <p>Your confirmation number is <span class="number"></span>.</p>
                    <p>If you have any questions regarding your request, contact us at <a class="textlink" href="mailto:email@test.com">email@test.com</a></p>
                    <p>Please provide your confirmation number listed above for reference.</p>
                </div>
            </div>
            <div class="clearfloat"></div>
        </div>
    </div>
</div>

Answer 1

你的第一次尝试是如此接近。 你希望你的任务是这样的：

var p = document.querySelector(".form-bg form > p");

然后你可以设置innerHTML 。

p.innerHTML = "Your new text";