用于在div中包装内容的纯javascript方法

Question

我想#slidesContainer用JavaScript 包装div中的所有节点.我知道它很容易在jQuery中完成,但我有兴趣知道如何用纯JS做到这一点.

这是代码:

<div id="slidesContainer">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
    <div class="slide">slide 4</div>
</div>

我想用另一个div中的一组"幻灯片"包装div id="slideInner".

Answer 1

如果您的"幻灯片"始终位于slidesContainer中,则可以执行此操作

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;

Answer 2

像BosWorth99一样,我也喜欢直接操作dom元素,这有助于维护节点的所有属性.但是,我想保持元素在dom中的位置而不仅仅是在有兄弟姐妹的情况下追加结尾.这就是我做的.

var wrap = function (toWrap, wrapper) {
    wrapper = wrapper || document.createElement('div');
    toWrap.parentNode.appendChild(wrapper);
    return wrapper.appendChild(toWrap);
};

Answer 3

如果为IE修补document.getElementsByClassName,您可以执行以下操作:

var addedToDocument = false;
var wrapper = document.createElement("div");
wrapper.id = "slideInner";
var nodesToWrap = document.getElementsByClassName("slide");
for (var index = 0; index < nodesToWrap.length; index++) {
    var node = nodesToWrap[index];
    if (! addedToDocument) {
        node.parentNode.insertBefore(wrapper, node);
        addedToDocument = true;
    }
    node.parentNode.removeChild(node);
    wrapper.appendChild(node);
}

示例:http: //jsfiddle.net/GkEVm/2/

Answer 4

我认为这是非常好的代码示例 - 此解决方案保留绑定事件

// element that will be wrapped
var el = document.querySelector('div.wrap_me');
// create wrapper container
var wrapper = document.createElement('div');
// insert wrapper before el in the DOM tree
el.parentNode.insertBefore(wrapper, el);
// move el into wrapper
wrapper.appendChild(el);

或者

function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}
// example: wrapping an anchor with class "wrap_me" into a new div element
wrap(document.querySelector('a.wrap_me'), document.createElement('div'));

参考

https://plainjs.com/javascript/manipulation/wrap-an-html-structure-around-an-element-28/

Answer 5

我喜欢直接操作dom元素 - createElement,appendChild,removeChild等,而不是注入字符串element.innerHTML.该策略确实有效,但我认为本机浏览器方法更直接.此外,它们返回一个新节点的值,从而使您免于另一个不必要的getElementById调用.

这非常简单,需要附加到某种类型的事件来进行任何使用.

wrap();
function wrap() {
    var newDiv = document.createElement('div');
    newDiv.setAttribute("id", "slideInner");
    document.getElementById('wrapper').appendChild(newDiv);
    newDiv.appendChild(document.getElementById('slides'));
}

的jsfiddle

也许这有助于你用vanilla js理解这个问题.

Answer 6

尝试做一些你通常用 jQuery 做的事情的一般好技巧，没有 jQuery，是查看 jQuery 源代码。他们在做什么？好吧，他们获取所有子节点，将它们附加到一个新节点，然后将该节点附加到父节点中。

这是一个简单的小方法来做到这一点：

const wrapAll = (target, wrapper = document.createElement('div')) => {
  ;[ ...target.childNodes ].forEach(child => wrapper.appendChild(child))
  target.appendChild(wrapper)
  return wrapper
}

以下是您如何使用它：

// wraps everything in a div named 'wrapper'
const wrapper = wrapAll(document.body) 

// wraps all the children of #some-list in a new ul tag
const newList = wrapAll(document.getElementById('some-list'), document.createElement('ul'))

Answer 7

在不需要父级的情况下简单地包装一个 div：

<div id="original">ORIGINAL</div>

<script>

document.getElementById('original').outerHTML
=
'<div id="wrap">'+
document.getElementById('original').outerHTML
+'</div>'

</script>

工作示例： https : //jsfiddle.net/0v5eLo29/

或者仅使用节点：

let original = document.getElementById('original');
let wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.appendChild(original.cloneNode(true));

original.replaceWith(wrapper);

工作示例： https : //jsfiddle.net/L5tyj9d7/