Question

我创建了一个JavaScript插件，在通过JavaScript操作之前，需要在网页上呈现相当大/复杂的HTML结构。我根本不想使用jQuery。

我希望能够将所有必需的代码捆绑在一个单独的JS文件中，该文件可以加载到父网页中，并且可以做到这一点＆＃39; 。我宁愿父页面不必包含任何额外的HTML / CSS才能工作 - 我希望所有内容都来自单个JS资源。

目前我在JavaScript变量中有大量的HTML作为字符串：

var templateBirthday = '\
    <section class="pwag-clearfix pwag-birthday-groups">\
        <div class="pwag-clearfix pwag-birthday-groups__inner">\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the year of your birth</p>\
                <div class="pwag-date-box pwag-date-box--valid pwag-date-box--0">\
                    <span class="pwag-date-box__value">1</span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--valid pwag-date-box--1">\
                    <span class="pwag-date-box__value">9</span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--2">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--3">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">Y</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the month of your birth</p>\
                <div class="pwag-date-box pwag-date-box--4">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">M</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--5">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">M</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
            <div class="pwag-birthday-group">\
                <p class="pwag-birthday-group__instruction">Enter the day of your birth</p>\
                <div class="pwag-date-box pwag-date-box--6">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">D</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
                <div class="pwag-date-box pwag-date-box--7">\
                    <span class="pwag-date-box__value"></span>\
                    <span class="pwag-date-box__placeholder">D</span>\
                    <input type="number" class="pwag-date-box__input" />\
                </div>\
            </div>\
        </div>\
        <div class="pwag-clearfix pwag-feedback">\
            <span class="pwag-feedback__message pwag-feedback__message--year">The year you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--month">The month you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--day">The day you entered is invalid</span>\
            <span class="pwag-feedback__message pwag-feedback__message--notLegal">You are not old enough to enter this site</span>\
        </div>\
    </section>\
';

然后我将其呈现到父页面中，如下所示：

function appendHtml(el, str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    while (div.children.length > 0) {
        el.appendChild(div.children[0]);
    }
}

appendHtml(document.body, templateBirthday);

工作正常;我在页面上看到了HTML。但是，现在我需要能够从同一个JS文件中操作各种HTML元素。例如，我想做到这一点：

document.querySelectorAll('.pwag-date-box')[0].style.border = '10px solid #f00';

但是，由于HTML是动态插入的，因此使用vanilla JS中的标准document.querySelectorAll类型的方法似乎无法访问它。

我担心我唯一的选择可能是创建大量的HTML作为“正确的”。 JavaScript对象而不是字符串。我希望有办法欺骗并使用HTML字符串。

是否有人知道是否可以使用HTML上的标准JS选择器作为字符串插入DOM？

非常感谢，

丹

Answer 1

您可以在将插入文档树之前操作节点。

let frag = new Range().createContextualFragment(str); let newNodes = frag.querySelectorAll(".pwag-date-box") // do modifications on newNodes here el.appendChild(frag)

Answer 2

简单的解决方案是使用var templateBirthday = '\ <section class="pwag-clearfix pwag-birthday-groups">\ <div class="pwag-clearfix pwag-birthday-groups__inner">\ <div class="pwag-birthday-group">\ <p class="pwag-birthday-group__instruction">Enter the year of your birth</p>\ <div class="pwag-date-box pwag-date-box--valid pwag-date-box--0">\ <span class="pwag-date-box__value">1</span>\ <span class="pwag-date-box__placeholder">Y</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ <div class="pwag-date-box pwag-date-box--valid pwag-date-box--1">\ <span class="pwag-date-box__value">9</span>\ <span class="pwag-date-box__placeholder">Y</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ <div class="pwag-date-box pwag-date-box--2">\ <span class="pwag-date-box__value"></span>\ <span class="pwag-date-box__placeholder">Y</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ <div class="pwag-date-box pwag-date-box--3">\ <span class="pwag-date-box__value"></span>\ <span class="pwag-date-box__placeholder">Y</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ </div>\ <div class="pwag-birthday-group">\ <p class="pwag-birthday-group__instruction">Enter the month of your birth</p>\ <div class="pwag-date-box pwag-date-box--4">\ <span class="pwag-date-box__value"></span>\ <span class="pwag-date-box__placeholder">M</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ <div class="pwag-date-box pwag-date-box--5">\ <span class="pwag-date-box__value"></span>\ <span class="pwag-date-box__placeholder">M</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ </div>\ <div class="pwag-birthday-group">\ <p class="pwag-birthday-group__instruction">Enter the day of your birth</p>\ <div class="pwag-date-box pwag-date-box--6">\ <span class="pwag-date-box__value"></span>\ <span class="pwag-date-box__placeholder">D</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ <div class="pwag-date-box pwag-date-box--7">\ <span class="pwag-date-box__value"></span>\ <span class="pwag-date-box__placeholder">D</span>\ <input type="number" class="pwag-date-box__input" />\ </div>\ </div>\ </div>\ <div class="pwag-clearfix pwag-feedback">\ <span class="pwag-feedback__message pwag-feedback__message--year">The year you entered is invalid</span>\ <span class="pwag-feedback__message pwag-feedback__message--month">The month you entered is invalid</span>\ <span class="pwag-feedback__message pwag-feedback__message--day">The day you entered is invalid</span>\ <span class="pwag-feedback__message pwag-feedback__message--notLegal">You are not old enough to enter this site</span>\ </div>\ </section>\ '; function appendHtml(el, str) { var div = document.createElement('div'); div.innerHTML = str; while (div.children.length > 0) { el.appendChild(div.children[0]); } } appendHtml(document.body, templateBirthday); //using document.getElementsByClassName() instead of document.querySelectorAll() document.getElementsByClassName('pwag-date-box')[0].style.border = '10px solid #f00'。希望它有所帮助...

＆＃13;

<body> </body>

＆＃13;

{{1}}

＆＃13;

操纵使用＆＃39; vanilla＆＃39;动态添加的HTML元素JavaScript的

2 个答案: