JavaScript在div中查找动态字符串并将其包装

预期结果

我想你可以用它来实现这一目标

它看起来像这样：

<div class="side">
    <a>Link 1</a>
    <a>Link 2</a>
    <span class="page-count">
        <input value="1"/>
          / 12
    </span>
</div>

虽然我不完全确定，但我认为应该使用与之相近的方法来完成这项工作。

如果要将一组元素（输入和/12文本节点）包装起来，单独包装是行不通的，因为它会单独包装每一个元素

var input = angular.element( document.querySelectorAll( '.side input'));
var textNode = input.nextSibling();
angular.element(textNode).append('<span>');

您需要找到相关的节点，即输入和文本节点，将它们从DOM中分离出来，将它们附加到新的span中，然后将span附加到原始div中

如中所述，可以通过使用和检查来包括文本节点

jQuery 使用完整jQuery，这并不太糟糕：

链接1 链接2 / 12

---

既然您使用的是angularjs，为什么不在html模板中创建一个包含角度表达式的模板呢？例如{page_count}}，其中page_count是保存页面计数的某个$scope属性。那你就不用担心修改了html@PatrickEvans这是由核心供应商提供的，如果供应商在运行Bowery时得到更新，您需要：

<div class="side">
    <a>Link 1</a>
    <a>Link 2</a>
    <span class="page-count">
        <input value="1"/>
          / 12
    </span>
</div>

var input = angular.element( document.querySelectorAll( '.side input'));
var textNode = input.nextSibling();
angular.element(textNode).append('<span>');

var lastText = addDiv[0].childNodes;
var lastTextIndex = addDiv[0].childNodes.length;
angular.element( lastText[lastTextIndex-1]).wrap('<span class="page-count">')

$('.side').append(function() {

    // create the span, add the detached nodes to it, then append to the container
    $('<span class="page-count"/>').append($(this).contents().filter(function(){

        // filter() contents down to textNodes and the input element, then detach() them all in one jQuery object
        return((this.nodeType === 3 && this.textContent.trim().length > 0)
            || (this.tagName && this.tagName.toUpperCase() === 'INPUT'))

    }).detach()).appendTo(this);

});