web-dev-qa-db-ja.com

divでコンテンツをラップする純粋なJavaScriptメソッド

#slidesContainer div内のすべてのノードをJavaScriptでラップします。 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>

id="slideInner"を使用して、divを別のdiv内にまとめて「スライド」のクラスでラップします。

javascripthtmlword-wrap
46
Squadrons

「スライド」が常にslidesContainerにある場合は、これを行うことができます

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

BosWorth99のように、dom要素を直接操作することも好きです。これは、ノードのすべての属性を維持するのに役立ちます。ただし、兄弟がいる場合にのみ末尾を追加するのではなく、dom内の要素の位置を維持したかったのです。これが私がしたことです。

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

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/

12
aroth

element.innerHTMLとしての文字列の挿入とは対照的に、dom要素を直接操作するのが好きです-createElement、appendChild、removeChildなど。この戦略は機能しますが、ネイティブのブラウザーメソッドはより直接的だと思います。さらに、それらは新しいノードの値を返すため、別の不必要な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でこの問題を理解するのに役立ちます。

7
Bosworth99

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'))
2
Ansikt

ここに非常に良いコード例があると思います-このソリューションはバインドされたイベントを保持します

// 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'));

ref

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

0
BG Bruno

私が理解している@Michalの答えは XXS攻撃に対して脆弱（innerHTMLの使用はセキュリティの脆弱性です）これに関する別のリンクです

これを行うには多くの方法があります 私が見つけて気に入ったものは ：

function wrap_single(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}
let divWrapper;
let elementToWrap;
elementToWrap = document.querySelector('selector');
// wrapping the event form in a row
divWrapper = document.createElement('div');
divWrapper.className = 'row';
wrap_single(elementToWrap, divWrapper);

これはうまく機能します。しかし、私にとっては、要素の一部だけをラップしたいことがあります。だから私はこれに関数を変更しました：

function wrap_some_children(el, wrapper, counter) {
  el.parentNode.insertBefore(wrapper, el);
  if ( ! counter ) {
    counter = el.childNodes.length;
  }
  for(i = 0; i < counter;  i++) {
    wrapper.appendChild( el.childNodes[0] );
  }
}
// wrapping parts of the event form into columns
let divCol1;
let divCol2;
// the elements to wrap
elementToWrap = document.querySelector('selector');
// creating elements to wrap with
divCol1 = document.createElement('div');
divCol1.className = 'col-sm-6';
divCol2 = document.createElement('div');
divCol2.className = 'col-sm-6';
// for the first column
wrap_some_children(elementToWrap, divCol1, 13);  // only wraps the first 13 child nodes
// for the second column
wrap_some_children(elementToWrap, divCol2);

これがお役に立てば幸いです。

0
Will

wrapInner複数のタグコンテンツ

function wilWrapInner(el, wrapInner) {
  var _el = [].slice.call(el.children);
  var fragment = document.createDocumentFragment();
  el.insertAdjacentHTML('afterbegin', wrapInner);
  var _wrap = el.children[0];
  for (var i = 0, len = _el.length; i < len; i++) {
    fragment.appendChild(_el[i]);
  }
  _wrap.appendChild(fragment);
}

リンクデモJsbin

0
viet nam