javascript - 如何将新的/更新的innerHTML 附加到没有类或id 的p 标记？

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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a4aca0a8ad81b5a4b2b5efa2aeac" rel="noreferrer noopener nofollow">[email protected]</a>"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89d95999194b88c9d8b8cd69b9795" rel="noreferrer noopener nofollow">[email protected]</a></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";